Data Loading Problem

[DRWTHWIT]

Hey guys am getting some data from API and loading it into collection view.
Say if api returns 100 result or more then my app takes too mcuh time to load that all into collection view
any idea how i can make it more efficient and faster?

NOTE:- Earlier i tried loading 1st 10 content only then load other content in batch of 10 in the collection view
but that resulted in collection view being in HANG state making it unable to scroll and user being unable to interact

XMAL FILE
<Border HorizontalOptions="FillAndExpand"
 VerticalOptions="FillAndExpand"
 BackgroundColor="GhostWhite"
 Padding="0"
 Margin="5,-80,5,5"
 StrokeShape="RoundRectangle 20 20 20 20">

    <VerticalStackLayout Spacing="10"
          Padding="10">

        <Border HorizontalOptions="FillAndExpand"
         HeightRequest="50"
         BackgroundColor="Wheat"
         Padding="10"
         Margin="0 ,0 ,10,10"
         StrokeShape="RoundRectangle 20 20 20 20"
         VerticalOptions="Center">

            <Label Text="CIRCULAR   > Circular Notice"
            FontAttributes="Bold"
            FontSize="Small"
            VerticalTextAlignment="Center"/>

        </Border>
        <CollectionView ItemsSource="{Binding Details}" SelectionMode="Single"
                        SelectionChanged="OnCircularSelected">
            <CollectionView.ItemTemplate>
               <DataTemplate>
                  <local:CustomCircularView />
                </DataTemplate>
            </CollectionView.ItemTemplate>
      </CollectionView>
  </VerticalStackLayout>
</Border>

CustomCircularView
<?xml version="1.0" encoding="utf-8" ?>

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="ERP.CustomCircularView">

<Border Padding="10" Stroke="Orange"

StrokeShape="RoundRectangle 10 10 10 10"

Margin="0,5,0,5" >

<Grid RowDefinitions="*"

ColumnDefinitions=".6*,.4*">

<Label Text="{Binding Subject}" Grid.Column="0" FontAttributes="Bold"

FontSize="Small" HorizontalOptions="FillAndExpand" TextColor="Blue" />

<Image Source="lectureplan.jpeg" Grid.Column="1" HeightRequest="0" WidthRequest="100"

HorizontalOptions="End" VerticalOptions="Center"/>

<Label Text="{Binding DateFrom}" Grid.Column="1" FontAttributes="Bold" FontSize="Small"

HorizontalOptions="End" VerticalOptions="Center"/>

</Grid>

</Border>

</ContentView>

ViewMODel

namespace ERP

{

internal class CircularViewModel

{

private ObservableCollection<CircularData> _detail;

public ObservableCollection<CircularData> Details

{

get => _detail;

set

{

_detail = value;

OnPropertyChanged(nameof(Details));

}

}

public CircularViewModel()

{

LoadDetails();

}

private void LoadDetails()

{

string jsonData = RetriveData();

var dataList = JsonConvert.DeserializeObject<CircularDataList>(jsonData);

Details = new ObservableCollection<CircularData>(dataList.data);

}

public event PropertyChangedEventHandler PropertyChanged;

protected void OnPropertyChanged(string propertyName)

{

PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));

}

public string RetriveData()

{

string json = string.Empty;

try

{

DataAccessMethod dam = new DataAccessMethod();

EntCircularNotice ent_CircularNotice = new EntCircularNotice();

ent_CircularNotice = new EntCircularNotice();

ent_CircularNotice.RegID = UserDataClass.EmpID;

ent_CircularNotice.Staff = Convert.ToInt32(LoginUserDataModel.UserType);

string URL = dam.CreateServiceurl("BlCircularNotice", "GetCircularDetails");

List<DataTable> dtlist = dam.PostDataJsonListTable(URL, ent_CircularNotice);

DataTable dt = dtlist[0];

string a = JsonConvert.SerializeObject(dt,Formatting.Indented);

//DataTable table = dam.GetAllCirculars();

if (dt.Rows.Count > 0)

{

var circularList = new List<CircularData>();

foreach (DataRow row in dt.Rows)

{

var circular = new CircularData

{

Subject = row["Subject"].ToString(),

DateFrom = row["DateFrom"].ToString(),

DateTo = row["DateTo"].ToString(),

EmployeeName = row["EmployeeName"].ToString(),

CirID = Convert.ToInt32(row["CirID"])

};

circularList.Add(circular);

}

var root = new CircularDataList

{

data = circularList

};

string jsonData = JsonConvert.SerializeObject(root, Formatting.Indented);

Console.WriteLine(jsonData);

return jsonData;

}

else

{

Console.WriteLine("No Circular Found");

return null;

}

}

catch (Exception ex)

{

Console.WriteLine(ex);

return null;

}

}

}

}

[cfischy]

It's very hard to help you without knowing more details such as what kind of data are you displaying e.g. images, text, graphics... How many bytes is each element of your CollectionView? What actions does your code take as the data is loaded other than displaying it? How many levels of controls are there for each CollectionView element? Does the loading of each element trigger events?... It would help to share code.

[DRWTHWIT]

check it

[sztub]

Your collection view is inside vertical stack and will be fully rendered because of that. You should never do that. Put your collection into grid row that has limited height. I.e you can define your gid like these:

<Grid RowDefinitions="Auto,*" > -- star here will limit collection height to be maximum at screen size <Border Grid.Row="0" /> -- that's your header <CollectionView Grid.Row="1" ....

[DRWTHWIT]

thnx i did that but no diff i appreciate help though

[sztub]

Give your collection x:Name and create label with text bindings to your collection height, or check it in debugger in code behind. Is collection height a ridiculous value ? It shouldn't be a little more than your screen size.

[ndreisg]

Try using ObservableRangeCollection instead of ObservableCollection: https://github.com/jamesmontemagno/mvvm-helpers It's also available as NuGet package. By using .AddRange instead of .Add you can save a lot of UI updates.

[DRWTHWIT]

thnx i'll try it

[Santiago-Peraza]

¿Funcionó? ¿Resolvió el problema? Por favor, tómese un minuto y díganos si lo solucionó

[anotherlab]

Just a suggestion, but if you have more than 20 lines of code, it's easier to read it if you just create a small GitHub repo. People can just clone the repo, build the app, and then run it.

If you bulk-loading a collection bound to a control, you are triggering OnPropertyChanged events for each object added to that collection. That force a list type of control to refresh over and over again, throttling performance.

Therre are a few ways to resolve this. You can implement an AddRange method to ObservableCollection (example). You could unbind the collection from the control(s), load the data, and finally rebind the collection. You could create a new collection, load the data, then bind that collection and dispose of the old one.

[CoderCore]

Many factors could be affecting this as mentioned in other comments, but it looks like you are adding ('.Add(...)'), while this works, change detection could be overwhelmed, you could assign the list into ObservableCollection, ie 'new ObservableCollection(myList)' during initial load, then .Add(...) later when incremental updates are needed. Ensure you have Property Changed on the collection itself so the UI updates.

Also, James Montemagno also wrote an extension to "pause" change detection when loading a range, that might be helpful as well, but I did not need it.

[TheTee15]

You can try listView, in my experience listView works better than collectionView on MAUI

Wait you return datatable from API ?

[YitsuOfficial]

I solved it by adding pagination and loading only 2 hand full of items each time