-
Notifications
You must be signed in to change notification settings - Fork 509
Possible improvement of app performance inside the home page #2051
Description
Summary
An analysis of the performance of the application was carried out and on the home page a certain Jank (slow frame) could be perceived that can affect the user experience and produce possible GUI lagging. Possibly this is due to the loading of several images (SVG) and loading of many elements.
Desired Solution
You can preload the images (SVG) used in the header, in the Protect yourself section, in the donate section and the images of that page (home) using the precachePicture function of the flutter_svg library that can be obtained in pub.dev, with a Future.wait[] you can preload all the images in picture cache making use of this function in a file that is executed before than the home page (for example, main.dart). Additionally, in the ScrollView used for the cards in the Protect yourself section of this same page you can use the lazy_load_scrollview library also obtained from pub.dev which allows lazy loading, i.e. only the visible portion of the cards is built at startup time.
These changes can improve the performance of the application in this page that loads so many elements and images.
Additional Context
Below is a possible implementation that can be applied in the code in main.dart to preload some images from home.dart (based on the above):
To preload images like the following (image used in the donate section of home):
Additionally, the ScrollView found in the Protect yourself section could be wrapped with the LazyLoadScrollView:
It is worth mentioning that these are suggestions that can be replaced with other suggestions that will improve the performance of the application much more. The important thing to note is that the application can have poor performance due to rendering many images and elements at the same time on a page.
Checklist:
- Check the Home page inside the repository and identify each of the components and their images.
- Check this open issue in GitHub community.
- Check the library flutter_svg and its precachePicture function in pub.dev.
- Check the library lazy_load_scrollview in pub.dev.