How to avoid the flickering effect when pushing a new page

MT_WSMMT_WSM FRMember ✭✭

Hi guys,

I noticed a few issues in my application. All of them are very subtle, but notable once we are aware of them...

Before describing these ones, it's important to say that I am using a MasterDetail page !
Firstly, when I push a new page using PushAsync method, there is a flickering effect. Indeed, here is how the UI is behaving:

  • there is some delay
  • the arrow icon is being displayed while still displaying the previous page
  • there is some delay
  • the page show up and the default background is notable (white in my case)
  • the components finally show up too

The delays that I am talking about are quite short (depending on the pages obviously). I mean, for example, a simple page would take around 1 to 2 seconde(s) to show up and even if the debug mode is for a lot, I am looking for some good practices to improve the performance and remove this effect mainly caused by the fact that the new page's background is remarkable.

It's also important to notify that I'm not using the XamlCompilation attribute while I'm debugging to gain some time during the compilation !

Secondly, on some pages I have an image as a background and this last one is always loading with some delay comparing to the rest of the components. Therefore, with the above issue it's like having a double flick... I tried to use CachedImage control instead of the Image's one, but the quality of the picture is well let's be honest quite gross when I am doing so.

Do you guys have any tips to improve my application ? Also I am curious about something: it's quite commun to use the InitializeComponents into a page's constructor, loading all of them at the same time, but is there a way to only load the important one in a first place and the rest afterward ?

I thank you all the people who will take the time to respond to my questions and I wish you a great weekend !! :)
Best regards,

MT WSM

Best Answer

  • JohnHardmanJohnHardman GB mod
    Accepted Answer

    @MT_WSM - Have you done the basic optimisation stuff? See

    Have you profiled your app to see whether the time is spent constructing the page's UI hierarchy or spent rendering it? Also, have you made sure that you are not setting a ContentPage's Content property, and after that then modifying the page layout? (make setting the Content property the last UI change you make before initial display). Have you removed any unnecessary bindings?

    If the time is spent building the UI hierarchy, you can reorganise code to do most of the work on a non-UI thread and just hook it up on the UI thread at the last moment (I do this on some pages). Some people also cache pages, so that they don't have to be rebuilt on subsequent use, although others (me included) have seen problems result from doing this. I have structured my code so that I can easily re-enable use of page caching when problems with it are resolved.

    If the time is spent on the rendering the page, it's going to be a case of simplifying the page (at least when it first appears), optimising renderers, and possibly switching particularly problematic pages to native.

    Although I have done various things to optimise page construction, I still see a delay on some pages because of the rendering time. I'll be re-factoring those pages when functionality is complete, possibly switching those pages to native.

    One final thing - if your app pages have a background color other than white, change the NavigationPage background color to that same color. It doesn't reduce the delay, but it makes it marginally less obvious.

Answers

  • MT_WSMMT_WSM FRMember ✭✭

    Hi ClintStLaurent,

    I just tried to do so and the only difference I can see is that the images are maybe loading a bit slower.
    Indeed, on one very simple page - where I didn't had any issue before - the images are now flickering too.

    When I set the animation back, this last one is being displayed perfectly fine. *
    I thank you for your response and if you have other leads, please let me know about them ! :)

    Best regards,
    MT WSM

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I can't explain it - I have several solutions that don't do what you're describing. I'm pretty sure if it was endemic to the Xamarin platform then you'd see 100,000 devs up in arms over it.

    Can you reproduce it in a basic "Welcome to Xamarin" app - then stick that on a GitHub repo for others to pull down and take a closer look at?

  • MT_WSMMT_WSM FRMember ✭✭

    Hi ClintStLaurent,

    As requested, I created a project from scratch and added a MasterDetailPage, which has Detail set with MainPage. This last one is a simple ContentPage proposing the user to open SecondPage tapping on a button. By doing so, you will navigate to it and notice the little flick effect since the project and the page are way lighter. I set the background as Pink

    Here is the link of my repository: github.com/MTWSM/Flickering_Issue_Demo (Sorry, can't create some links yet)

    I thank you one more for your precious time and wish you a great day !!
    Best regards,

    MT WSM

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I'll have to give it a go from home - At work we haven't received approval to move to XF 2.5.0.xxx yet.

  • Abbasym2009Abbasym2009 INMember ✭✭

    I think you want to hide/show images right ?
    If this is the case , Use Isvisible property of the image and in the viewmodel or .cs page make Visible property true or false.
    This will help you for image flickering issue.

  • MT_WSMMT_WSM FRMember ✭✭

    @ClintStLaurent said:
    I'll have to give it a go from home - At work we haven't received approval to move to XF 2.5.0.xxx yet.

    Perfect, talk to you soon then. :)

    @Abbasym2009 said:
    I think you want to hide/show images right ?
    If this is the case , Use Isvisible property of the image and in the viewmodel or .cs page make Visible property true or false.
    This will help you for image flickering issue.

    Hi Abbasym ! Actually, that's not what I want. Maybe my sayings were not clear enough, but to summarize when I am navigating page to page (using a MasterDetailPage in my case) and when these pages have a lot of components or have an image as a background, I can clearly notice the default BackgroundColor of it for very short of time. It's like seeing a flash for a few seconds or less depending on the projects / pages.

    So to be clearer, I want my Image to be display as soon as possible and avoid this flash / flickering effect. If there was a way to push my page once all the components / images are loaded, it could fix my issue. Do you have any idea how to do so ?

    Wish you a great day guys !!
    Best regards,

    MT WSM

  • Abbasym2009Abbasym2009 INMember ✭✭

    You can reduce the size of the background image. sometimes size of the image also causes the problems.

    Just a thought !!

    Have a good day !!

  • JohnHardmanJohnHardman GBUniversity mod
    Accepted Answer

    @MT_WSM - Have you done the basic optimisation stuff? See

    Have you profiled your app to see whether the time is spent constructing the page's UI hierarchy or spent rendering it? Also, have you made sure that you are not setting a ContentPage's Content property, and after that then modifying the page layout? (make setting the Content property the last UI change you make before initial display). Have you removed any unnecessary bindings?

    If the time is spent building the UI hierarchy, you can reorganise code to do most of the work on a non-UI thread and just hook it up on the UI thread at the last moment (I do this on some pages). Some people also cache pages, so that they don't have to be rebuilt on subsequent use, although others (me included) have seen problems result from doing this. I have structured my code so that I can easily re-enable use of page caching when problems with it are resolved.

    If the time is spent on the rendering the page, it's going to be a case of simplifying the page (at least when it first appears), optimising renderers, and possibly switching particularly problematic pages to native.

    Although I have done various things to optimise page construction, I still see a delay on some pages because of the rendering time. I'll be re-factoring those pages when functionality is complete, possibly switching those pages to native.

    One final thing - if your app pages have a background color other than white, change the NavigationPage background color to that same color. It doesn't reduce the delay, but it makes it marginally less obvious.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @MT_WSM said:

    @ClintStLaurent said:
    I'll have to give it a go from home - At work we haven't received approval to move to XF 2.5.0.xxx yet.

    Perfect, talk to you soon then. :)

    I realized how long its been since I launched VS2017 at home - I should be ashamed of myself.
    Anyway - Visual Studio spent the night updating. Given that I am a bit rural and have LTE as my household internet service doesn't help. My in-city coworkers brag about their in-home high speed fiber while my entire house network basically shares a cell-phone plan. Still, its faster than satellite internet.

    I'll try to give this a try again tonight.

  • NMackayNMackay GBInsider, University mod

    @ClintStLaurent said:

    @MT_WSM said:

    @ClintStLaurent said:
    I'll have to give it a go from home - At work we haven't received approval to move to XF 2.5.0.xxx yet.

    Perfect, talk to you soon then. :)

    I realized how long its been since I launched VS2017 at home - I should be ashamed of myself.
    Anyway - Visual Studio spent the night updating. Given that I am a bit rural and have LTE as my household internet service doesn't help. My in-city coworkers brag about their in-home high speed fiber while my entire house network basically shares a cell-phone plan. Still, its faster than satellite internet.

    I'll try to give this a try again tonight.

    LTE for broadband, you must live out in the sticks :smile:

  • try these small tips...
    1. Initialiase the variable/properties in constructor...
    2. Call service calls in Page.ViewAppearing() method
    3. Use asyc keyword for async methods... dont block the main thread

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @NMackay said:
    LTE for broadband, you must live out in the sticks :smile:

    20 minutes out of town. 2.5 acres, half of which is oak forest. On the plus side I have my own outdoor shooting range - and plenty of space for flying my drone, parking for parties/RV/Tractor/trailers... dogs to run... a pond...

    Even turtles that live in the pond come up to the cleared yard on occasion

  • JohnHardmanJohnHardman GBUniversity mod

    @ClintStLaurent - Some things more than make up for slow connectivity :-)

  • NMackayNMackay GBInsider, University mod
    edited November 2017

    I grew up in the Western Isles of Scotland, I think that counts as out in the sticks too :smile:

    View isn't too shabby though.

  • JohnHardmanJohnHardman GBUniversity mod

    @NMackay - After fireworks scaring the heck out of my dog this year, sorely tempted to spend next fireworks season on a remote UK island in the hope of avoiding a repeat performance. Will be Googling to see if any of them have a ban on fireworks. Lundy is closer by, but the Western Isles have been on the wish list a while already, so you never know...

  • MT_WSMMT_WSM FRMember ✭✭

    @Abbasym2009 said:
    You can reduce the size of the background image. sometimes size of the image also causes the problems.

    Just a thought !!

    Have a good day !!

    Downsizing the pictures didn't help in my case, but again thank you for sharing your thoughts !!

    @JohnHardman: I did saw Jason's talk and I am using most of his advice. I remember when I did hear him, back then, saying "don't use this" and "don't do that", I was like "So, I literally can't do anything...". Afterwards, I understood that it was to improve our app as much as possible and using some of them (if there is a good reason to do so obviously !) is alright. Now, by reading your post I remembered that he also said to avoid RelativeLayout as much as possible.

    I used these last ones to display some pages' background as it was said in some threads such as this one. I was so desperate this morning, I started reviewing each point that Jason enumerated and at some point I reviewed my RelativeLayouts. I looked for a way to replace them and in the same topic I just shared, I found out the ContentPage's BackgroundImage attribute.

    How was I not aware of its existence ?!! Setting my background image into it resolved my second flick issue. I am so relieved, but it was only one of the two problems with which I came here. I am well aware that for resolving the first one (pages being quite slow to show up) is mainly about the amount of views therefore I will simply optimize my display or if needed, review my UX.

    @MahaLakshmiGunti: Thank you for these tips ! I am trying hard to follow this guideline, but sometimes I just need to do otherwise. As Jason's talk, this is a great reminder !!

    @ClintStLaurent @NMackay: You guys are / were living in some great places; I do dream about nature and fresh air in my big city. haha Even for the more IT of us, disconnecting from the new technologies from times to times is important or at least I believe so.

    I would like to thank you guys, one more time, for your time, your response(s) and your pictures ! :smiley:
    Wishing you a great day !!

    Best regards,
    MT WSM

  • ZenDroidZenDroid USMember ✭✭✭
    edited January 2018

    Did you solve the problem of flickering effect?

Sign In or Register to comment.