delay with the navigation to a page contains 3 listviews - xamarin.forms

Question

I'm new to Xamarin.Forms so please excuse me. I'm developing an application using navigation pages,The App main page contains 3 horizontal listviews, Each time I navigate to another page then returns to the main page the app hangs for about a minute recreating all the lists again.
I tried to put the lists creation function on the On-Appearing function but still very slow loading the page
Here's the code for the main page
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
xmlns:listview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:button="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
xmlns:ListCollection="clr-namespace:System.Collections.Generic;assembly=mscorlib"
xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
x:Class="GDG6OCT.Views.HomePage"
NavigationPage.HasNavigationBar="False"
FlowDirection="RightToLeft">
<StackLayout>
<ScrollView>
<StackLayout Padding="0">
<rotator:SfRotator x:Name="rotator" HorizontalOptions="FillAndExpand" NavigationDelay="2000" EnableLooping="True"
DotPlacement="None" EnableAutoPlay="true" HeightRequest="160">
<rotator:SfRotator.DataSource>
<ListCollection:List x:TypeArguments="rotator:SfRotatorItem">
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
</ListCollection:List>
</rotator:SfRotator.DataSource>
</rotator:SfRotator>
<Label Text="جميع الاقسام" HorizontalOptions="StartAndExpand" Margin="20,30,20,0"
Style="{StaticResource MainLabel}"/>
<listview:SfListView x:Name="CatList" Margin="10,0" ItemSize="100"
ItemSpacing="5" Orientation="Horizontal" HeightRequest="100">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<button:SfButton HasShadow="True" BackgroundColor="{Binding BackgroudColor}"
Text="{Binding Name}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
FontAttributes="Bold" FontFamily="{StaticResource Second}" Clicked="SfButton_Clicked"
FontSize="11"/>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
<Label Text="أحدث المقررات الدراسية" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<!--<DataTemplate>
<Image Source="{Binding CourseImage}">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
</DataTemplate>-->
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
<Label Text="المقررات الدراسية الاشهر" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList1" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
<Label Text="المقررات الدراسية المقترحة" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList2" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
</StackLayout>
</ScrollView>
<Grid Padding="0" ColumnSpacing="-15" BackgroundColor="{StaticResource DGrey}"
VerticalOptions="EndAndExpand" HorizontalOptions="Fill"
HeightRequest="65" Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="65"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" BackgroundColor="#ef3e42" Image="home1.png" TextColor="White"
Text="الرئيسية" ContentLayout="Top,1" FontSize="11" FontFamily="{StaticResource Second}"/>
<Button Grid.Column="1" Clicked="GotoSearchPage" TextColor="White" BackgroundColor="Transparent"
Image="search1.png" FontFamily="{StaticResource Second}"
Text="البحث" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="2" TextColor="White" BackgroundColor="Transparent"
Image="play.png" FontFamily="{StaticResource Second}" Clicked="GotoMCoursesPage"
Text="كورساتى" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="3" TextColor="White" BackgroundColor="Transparent" Image="fav2.png" Text="المفضلة" Clicked="GotoFavPage"
FontFamily="{StaticResource Second}" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="4" TextColor="White" BackgroundColor="Transparent" FontFamily="{StaticResource Second}" Clicked="GotoAccPage"
Image="pers1.png" Text="الحساب" ContentLayout="Top, 5" FontSize="10"/>
</Grid>
</StackLayout>
</ContentPage>
and here is the code for the backend
using GDG6OCT.Models;
using Syncfusion.XForms.Buttons;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace GDG6OCT.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class HomePage : ContentPage
{
public ObservableCollection<Category> Categories = new ObservableCollection<Category>();
public ObservableCollection<Course> Courses = new ObservableCollection<Course>();
public HomePage ()
{
InitializeComponent ();
}
protected override void OnAppearing()
{
creatList();
base.OnAppearing();
}
void creatList()
{
Categories.Add(new Category { Name = "إذاعة", BackgroudColor = Color.Purple });
Categories.Add(new Category { Name = "صحافة إعلام", BackgroudColor = Color.Orange });
Categories.Add(new Category { Name = "نظم معلومات", BackgroudColor = Color.Green });
Categories.Add(new Category { Name = "سياحة وفنادق", BackgroudColor = Color.Pink });
Categories.Add(new Category { Name = "إذاعة ", BackgroudColor = Color.Yellow });
Categories.Add(new Category { Name = "الصحافة والاعلام", BackgroudColor = Color.Red });
Categories.Add(new Category { Name = "نظم معلومات ", BackgroudColor = Color.Purple });
Categories.Add(new Category { Name = "الصحافة", BackgroudColor = Color.Orange });
Categories.Add(new Category { Name = "سياحة وفنادق ", BackgroudColor = Color.Green });
CatList.ItemsSource = Categories;
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "تقنيات إعلامية", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "علم النفس العام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "مدخل الى فن الإعلام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "تقنيات إعلامية", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "علم النفس العام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "مدخل الى فن الإعلام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
CourseList.ItemsSource = Courses;
CourseList1.ItemsSource = Courses;
CourseList2.ItemsSource = Courses;
}
private void GotoSearchPage(object sender, EventArgs e)
{
Navigation.PushAsync(new SearchPage());
}
private void GotoMCoursesPage(object sender, EventArgs e)
{
Navigation.PushAsync(new MyCrsPage());
}
private void GotoFavPage(object sender, EventArgs e)
{
Navigation.PushAsync(new FavPage());
}
private void GotoAccPage(object sender, EventArgs e)
{
Navigation.PushAsync(new AccPage());
}
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var itemT = (Course)((StackLayout)sender).BindingContext;
CatList.SelectedItem = null;
await Navigation.PushAsync(new CoursePage(itemT));
}
private async void SfButton_Clicked(object sender, EventArgs e)
{
var itemT = (Category)((SfButton)sender).BindingContext;
CatList.SelectedItem = null;
await Navigation.PushAsync(new CategPage(itemT));
}
}
}
UPDATE
I rewrote the listview's dataTemplate using Grid instead of nested stackLayout and cleaned the code a littlebit
<DataTemplate>
<Grid ColumnSpacing="0" RowSpacing="0" Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2.5*"/>
<RowDefinition Height="1.2*"/>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.4*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Grid.ColumnSpan="2" HasShadow="True" Padding="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" Aspect="AspectFill"/>
</Frame>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Pro_Name}" FontAttributes="Bold"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<rating:SfRating Grid.Row="2" Grid.Column="0" x:Name="rating" Value="5" ItemCount="5" ItemSize="9"
ItemSpacing="1" VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
FontSize="8" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<Label Grid.Row="3" Grid.Column="0" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Grid.Row="3" Grid.Column="1" Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End"
FontFamily="{StaticResource Second}" TextColor="Red" Margin="8,0,0,0"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>

Answer 1

Do you really need to recreate the Lists again?
If you push a new Page into the stack , then, when popping, you still have your mainpage active, so there is no need to recreate the view.
If you want, you can have a bool indicating if the items were loaded, then, OnAppearing will only load items once.
Example:
private bool _loadedItems=false;
public HomePage ()
{
InitializeComponent ();
}
protected override void OnAppearing()
{
base.OnAppearing();
if(!_loadedItems)
{
creatList();
_loadedItems = true;
}
}

Answer 2

I would strongly suggest reconsidering your layout.
First of all three list views on one single screen isn't the most desirable thing to have in terms of user experience, especially on devices with smaller screens.
If it is possible within your app's requirements I would suggest using a TabbedPage with each ListView being available in it's own tab.
Next thing, sorry to put it that way, but the layout you are using within your ListView cells is a horrible choice in terms of performance. The StackLayout needs a lot more layout cycles in order to determine it's final dimensions, as far as I have seen, you are stacking four of them into a single cell and to make things worse, with one StackLayout containing the other ones.
That takes quite a lot of layout cycles until the xamarin layout engine has finally computed the final size of that ONE(!) view cell and that time gets multiplied by the number of items in your ListView's ItemsSource property.
So what can you do about it? You can quite easily replace your tree of stacklayouts with a single grid (Pro Tip: Do not use "Auto" within the row and column height/width definitions, as this would also take more layout cycles, " * " or " 2* " etc. should do nicely).
Choose the proper amount of columns and rows to display your data and place all your controls, images, labels etc as children of that grid, then use Grid.Row, Grid.Column, Grid.RowSpan and Grid.ColumnSpan for those elements in order put them into the desired position.
This way would save you some layout cycles, so your view should be prepared to display way faster than it is now, especially as the layout cycles reduced by those optimizations also multiply with the amount of your data, but this time in your favor!