Here’s the scenario:
Primary page has tabset with defer rendering and lazy load include components on every tab.
- Tab contains a page include, set to lazy load
– included page includes a wizard, set to defer rendering
— all three wizard steps contain page include components, and are set to lazy load those components.
It appears that in this scenario, skuid is attempting to load the page include of the first step of the wizard at least twice.
Here’s the scenario:
What version of Skuid is this on?
How are you loading your page includes in the tabset (and your page includes in the page include)? Is it through a snippet?
no snippets, just the standard load and lazy-load behavior of the tabset and wizard.
have you been able to replicate the scenario described in the OP?
I think I have my setup correct now, but I’m not sure if I’m seeing the problem that you are. I have everything set to defer rendering and lazy load (except the page include on the first tab, which I let load on page load). I do see a Loading message twice on that first tab, but I think that’s expected behavior. The first loading message is for the page include on the tab to load, and the second loading message is where the page include in the included page / wizard is loading. Is that what you’re seeing, or are you seeing something different?
That all sounds right, except that the wizard I’m having trouble with is not in the first tab of the tabset:
- Page Include (lazy load)
-Wizard Step 1
-Page Include (not lazy load)
-Awesome Custom Signature Component (attempting to render twice)
-Wizard Step 2
-Page Include (lazy load)
-Awesome Custom Signature Component (working fine)
I have the tabset and wizard both deferring rendering, but the page include in the first step of the wizard is not set to lazy load because if I do, the include doesn’t want to render. However, Skuid is attempting to load my custom component on wizard step 1 twice (and perhaps all of the components, but I can’t really tell). I have a console.log call at the beginning of my component, and it’s being called twice.
I have the same component in the page include in the second wizard step, and it’s rendering only once (and therefore working just fine).
Can you try making a simple custom component which just logs its own rendering and inserting it into your test setup?
I think I’ve got it! I can see the same behavior on my custom component, where it’s logging more than once. One last question for you - Can you visually see the component rendering more than once or can you just tell from the console.log?
Perhaps it’s because my component is poorly designed, but it doesn’t work correctly when it renders twice, which is what started me on this process. I think it’s because I’m using some jQuery #selectors, and the double-rendering confuses things. If the page is loading slowly, I can actually see it render twice (the first time it looks fine, and then it gets messed up).