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.

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: Re: Flickering_Page - Pastebin
Flickering_tab: Flickering_Tab - Pastebin
Flickering_Tab_Tab: Flickering_Tab_Tab - Pastebin

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: Re: Flickering_Page - Pastebin
Flickering_tab: Flickering_Tab - Pastebin
Flickering_Tab_Tab: Flickering_Tab_Tab - Pastebin

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 Lukas, in that case we recommend upgrading Skuid in a Sandbox to the latest version (12.4.12)

Best practices for upgrading can be found in Upgrading Skuid on Salesforce. As a reminder, Salesforce does NOT allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission critical functionality before installing into a production environment. We also recommend that you update out of date Themes after you upgrade. Please let us know if you continue to encounter problems with this issue after upgrading.

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

Hi Lukas,

This might not be relevant for you anymore if your move to v2 is complete, but in case it’s still an issue, is it possible the page includes have the same theme selected on the pages?

We had this issue a while back in that any page includes that were set to load the same theme as the top page they were loading from made the whole page flicker as if it was reloading the style sheet again. Changing the page includes to be ‘Theme: Default’ causes the parent theme to carry through to all page includes anyway and stopped the flicker for us.

Hello Emma,

Thank you for the suggestion.

I am closer to v2 now than v1

Unfortunately, that doesn’t seem to fix it for me, though I will mark your question as the answer if anyone else encounters this issue.

Best,

Lukas