Page Include in Tabs Causes Flickering

To recreate: > Add Tabs Component -> Create multiple tabs -> on Non-first tab add page include component -> Create an empty page -> Select the empty page for Page Include component.

When you go to the tab with page include component it causes a flicker (or multiple flickers if it there are multiple page includes) almost as if its causing a re-render of the tabs component. A way to avoid the flickering is if you don't defer the rendering of tabs, but that causes a massive loading time at the very start that I cannot have.

Does anyone have any ideas to avoid it?

Thank you.

Best Answer

Answers

  • Hello,

    I am not having much success reproducing the issue in my Salesforce org. I am using the latest Skuid version. Can I get you to provide the version you are using as well as XML to a sample of your page (if possible)?

    Thanks for your help,

    Matt

  • Hello,
    Thank you for taking your time to look at it. You're right, I wasn't able to reproduce it with latest version of Skuid v2. Though, I can fairly consistently create the issue using latest version of Skuid v1 (roughly once every 3 times, it's a bit subtle for this simplified version). Just to reiterate, I cannot uncheck 'Defer rendering of tab content' for Tab Set due to loading times.

    3 Pages in total:
    (pastebin for easier reference)
    Flickering_Page: https://pastebin.pl/view/af1ed401
    Flickering_tab: https://pastebin.pl/view/46e63641
    Flickering_Tab_Tab: https://pastebin.pl/view/b482a2b9

    Page 1:
    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models/>
    <components>
    <tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-3PsS-226">
    <tabs>
    <tab name="Tab 1">
    <components/>
    </tab>
    <tab name="Tab 2" loadlazypanels="true">
    <components>
    <includepanel type="skuid" uniqueid="sk-3PsV-268" pagename="Flickering_tab"/>
    </components>
    </tab>
    </tabs>
    </tabset>
    </components>
    <resources>
    <labels/>
    <javascript/>
    <css/>
    <actionsequences/>
    </resources>
    <styles>
    <styleitem type="background" bgtype="none"/>
    </styles>
    </skuidpage>




    Page 2:
    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models/>
    <components>
    <includepanel type="skuid" uniqueid="sk-3PtV-226" pagename="Flickering_Tab_Tab"/>
    </components>
    <resources>
    <labels/>
    <javascript/>
    <css/>
    <actionsequences/>
    </resources>
    <styles>
    <styleitem type="background" bgtype="none"/>
    </styles>
    </skuidpage>



    Page 3:
    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models/>
    <components/>
    <resources>
    <labels/>
    <javascript/>
    <css/>
    <actionsequences/>
    </resources>
    <styles>
    <styleitem type="background" bgtype="none"/>
    </styles>
    </skuidpage>



    Thank you,
    Lukas
  • Hello,
    Thank you for taking your time to look at it. You're right, I wasn't able to reproduce it with latest version of Skuid v2. Though, I can fairly consistently create the issue using latest version of Skuid v1 (roughly once every 3 times, it's a bit subtle for this simplified version). Just to reiterate, I cannot uncheck 'Defer rendering of tab content' for Tab Set due to loading times.

    3 Pages in total:
    (pastebin for easier reference)
    Flickering_Page: https://pastebin.pl/view/af1ed401
    Flickering_tab: https://pastebin.pl/view/46e63641
    Flickering_Tab_Tab: https://pastebin.pl/view/b482a2b9


    Thank you,
    Lukas
  • Hi Lukas, thanks so much for the repro pages. What version of Skuid are you using?

  • Hi,
    Sorry, its SKUID 11.2.27
  • Hi Anna,
    Thank you for taking a look at my case.

    As you suggested, we are moving to 12.4.12, but that's a big change, so we were hoping for a quick fix to implement while we were moving to the latest version.

    Thank you,
    Lukas
  • Hi Lukas,

    Let me create and test your pages (v1) on my end with the latest Skuid version. I'll look into a workaround for Skuid version 11, but my suspicion is that there was an update along the way that may not allow us to avoid the problem with your page design.

    If we can reproduce the issue we'll report it to the product team.

    Thank you for your patience,

    Matt

  • Well, I created a more involved page that matches your page design. In the end, I could not replicate the flickering. This is good, but does not help you running in Skuid version 11. Do have options to refactor the page to not use as many page includes? This is a stretch as it may not even be the cause. Let me know if you are unable to upgrade to the latest release and I'll spend some more time with it.

    Matt

  • Thank you Matt for your work. It's unfortunate that you couldn't replicate it, though I don't think this issue is worth your or my time as we are in progress of moving to SKUID v2 and that should fix the issue.

    Thank you,
    Lukas
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!