Laggy Scroll when Binding Image to url or stream. (FLEX LAYOUT)

[ghost]

Hey I've been working on a project where I call Images From an API, either I convert them to bytes and load them from stream or I'm using Maui bindable source from uri and cache them. Both scenarios lead to a laggy scrollview. If I load them from local storage no issue. Thanks in advance if anyone could open my eyes. Btw there are 12 images about 40x40 px and like 100kb max? Also I have observed that when I was loading images locally [Layouts would resize to image dimensions, or image would fit nice inside them] but now seems like I have to explicitly tell the layout to have a specific dimension?

.Net 7

PROBLEM IS AT ALL THINGS SECTION

Here is my XAML CODE:

`

<ContentPage.Resources>
    <ResourceDictionary>
        <toolkit:ByteArrayToImageSourceConverter x:Key="ByteArrayToImageSourceConverter" />
    </ResourceDictionary>
</ContentPage.Resources>

<Grid>
    <VerticalStackLayout IsVisible="{Binding HasInternet, Converter={converters:InverseBoolConverter}}" Padding="30" VerticalOptions="Center" Spacing="20">
    <Label Text="This application requires internet connection, please connect to a network" HorizontalOptions="Center"></Label>
        <Image Source="loading.png" HorizontalOptions="Center" x:Name="LoadingImage"  Scale="0.8"/>
    </VerticalStackLayout>
    <Grid IsVisible="{Binding HasInternet}">
    <Grid.RowDefinitions>
        <RowDefinition Height="60"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="70"/>

    </Grid.RowDefinitions>

    <controls:CustomTitleBar Grid.Row="0"></controls:CustomTitleBar>

    <ScrollView Grid.Row="1">

        <VerticalStackLayout BackgroundColor="#545595">
            <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <!--***** ALL THINGS *****-->
            <Grid Grid.Row="2" Margin="0,0,0,0" BackgroundColor="#6667AB">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Label Text="Title" Grid.Row="0" HorizontalOptions="Center" FontSize="20" Margin="10" TextColor="White"></Label>
                <FlexLayout BindableLayout.ItemsSource="{Binding AllThings}" x:Name="AllThingsFlex" Grid.Row="1" Direction="Row" Margin="15,5,15,15"  AlignItems="Start" Wrap="Wrap" AlignContent="SpaceBetween" JustifyContent="SpaceEvenly">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate x:DataType="models:AllThingsModel">
                            <Frame
                                HeightRequest="{DynamicResource AllThingsFrameWidth}"
                                WidthRequest="{DynamicResource AllThingsFrameWidth}"
                                Margin="0,2,2,6"
                                Padding="6"
                                CornerRadius="2">

                                <FlexLayout Direction="Column" JustifyContent="SpaceBetween" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                                     <FlexLayout AlignItems="Start">
                                            <Label FontSize="12" Text="{Binding Number}" HorizontalOptions="Start"></Label>
                                            <Label Text="{Binding Text}" FontAttributes="Bold" FontSize="12" HorizontalOptions="Start"></Label>
                                     </FlexLayout>

                                            <Image Source="{Binding ImageUrl}" HorizontalOptions="Center" VerticalOptions="Center"></Image>
                                            <Label Text="Explore" TextColor="#797AB5" HorizontalOptions="Start" VerticalOptions="End"></Label>

                                        <FlexLayout.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding Source={x:Reference Home}, Path=BindingContext.NavigateToWebCommand}" CommandParameter="{Binding Url}"/>
                                        </FlexLayout.GestureRecognizers>

                                    </FlexLayout>

                            </Frame>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </FlexLayout>
            </Grid>

        </Grid>

            <VerticalStackLayout >

                <ActivityIndicator HorizontalOptions="FillAndExpand" x:Name="progress" VerticalOptions="Center"/>

                <Frame HeightRequest="1500" x:Name="WebViewStack" IsVisible="true" CornerRadius="0" Padding="0" Margin="0,-50,0,0">

                </Frame>
            </VerticalStackLayout>

         <Image Source="bot_login.png" Margin="0,40,0,0"></Image>
        </VerticalStackLayout>
    </ScrollView>

    <controls:CustomTabBar Grid.Row="2"></controls:CustomTabBar>

</Grid>
</Grid>

`

[ghost]

Waiiit a minute!! I just removed some lines of code from the source of the problem and UI is not laggy now, though I lost some Elements. Here is how the laggy part looks now and it's ok. Almost there.

I'm still looking for an explanation.

            <!--***** ALL THINGS *****-->
            <Grid Grid.Row="2" Margin="0,0,0,0" BackgroundColor="#6667AB">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Label Text="All things SYMMETRIA" Grid.Row="0" HorizontalOptions="Center" FontSize="20" Margin="10" TextColor="White"></Label>
                <FlexLayout BindableLayout.ItemsSource="{Binding AllThings}" x:Name="AllThingsFlex" Grid.Row="1" Direction="Row" Margin="15,5,15,15"  AlignItems="Start" Wrap="Wrap" AlignContent="SpaceBetween" JustifyContent="SpaceEvenly">
                    <BindableLayout.ItemTemplate>
                        <DataTemplate x:DataType="models:AllThingsModel">
                            <Frame
                                HeightRequest="{DynamicResource AllThingsFrameWidth}"
                                WidthRequest="{DynamicResource AllThingsFrameWidth}"
                                Margin="0,2,2,6"
                                Padding="6"
                                CornerRadius="2">

                                     <Image HeightRequest="40" WidthRequest="40" Source="{Binding ImageUrl}" HorizontalOptions="Center" VerticalOptions="Center"></Image>                                                         
                            </Frame>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </FlexLayout>
            </Grid>

[ghost]

So the problem lies in FlexLayout.

Now my code looks like

                             <Frame
                                HeightRequest="{DynamicResource AllThingsFrameWidth}"
                                WidthRequest="{DynamicResource AllThingsFrameWidth}"
                                Margin="0,2,2,6"
                                Padding="6"
                                CornerRadius="2">

                                        <Grid>
                                            <HorizontalStackLayout Spacing="2">
                                                <Label FontSize="12" Text="{Binding Number}" HorizontalOptions="Start"></Label>
                                                <Label Text="{Binding Text}" FontAttributes="Bold" FontSize="12" HorizontalOptions="Start"></Label>
                                            </HorizontalStackLayout>

                                        <Image HeightRequest="40" WidthRequest="40" Source="{Binding ImageUrl}" HorizontalOptions="Center" VerticalOptions="Center"></Image>
                                        <Label Text="Explore" TextColor="#797AB5" HorizontalOptions="Start" VerticalOptions="End"></Label>
                                        </Grid>
                            </Frame>

[ghost]

So final conclusion if anyone face a similar issue, the only workaround I found is to specify the width and height request on both flex layouts. Has to do something with resizing cause Image is loaded after the view has been loaded. So If anyone could tell me if there is a way to load images before view is loaded.

                            <Frame
                                HeightRequest="{DynamicResource AllThingsFrameWidth}"
                                WidthRequest="{DynamicResource AllThingsFrameWidth}"
                                Margin="0,2,2,6"
                                Padding="6"
                                CornerRadius="2">

                                <FlexLayout HeightRequest="100" WidthRequest="100" Direction="Column" JustifyContent="SpaceBetween" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                                     <FlexLayout AlignItems="Start" HeightRequest="80" WidthRequest="80">
                                            <Label FontSize="12" Text="{Binding Number}" HorizontalOptions="Start"></Label>
                                            <Label Text="{Binding Text}" FontAttributes="Bold" FontSize="12" HorizontalOptions="Start"></Label>
                                     </FlexLayout>

                                            <Image HeightRequest="40" WidthRequest="40" Source="{Binding ImageUrl}" HorizontalOptions="Center" VerticalOptions="Center"></Image>
                                            <Label Text="Explore" TextColor="#797AB5" HorizontalOptions="Start" VerticalOptions="End"></Label>

                                        <FlexLayout.GestureRecognizers>
                                            <TapGestureRecognizer Command="{Binding Source={x:Reference Home}, Path=BindingContext.NavigateToWebCommand}" CommandParameter="{Binding Url}"/>
                                        </FlexLayout.GestureRecognizers>

                                    </FlexLayout>

                            </Frame>

[ghost]

Hi @devdennis97. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[ghost]

Hi @devdennis97. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.