reuters-graphics/graphics-svelte-components

Remove dynamic importing examples from docs

Closed this issue · 4 comments

fcage commented

The AI scroller component does some dynamic loading. Because of this, if it's the item at the top of the page (ie right under the headline) there's some obvious page jumping around business going on here when coming to the page. Are there ways we can fix this? Here are two ideas

  • give the containing div a min height of 100vh, since in theory a scroller will be at least 100vh or we wouldn't be using it for this purpose
  • OR, bake out the steps and the shell html of the scroller and and load the ai components in the background? Is there a way we can more optimally use slots in this case?
hobbes7878 commented

Quick Q on this @fcage, but are y'all using dynamic imports using strings from a gdoc that represent components? I'm very keen to basically declare that an anti-pattern for us b/c it always makes for these loading issues. The Scroller component itself assumes components are passed to it, not strings, but I do realise the example in the docs uses this anti-pattern with the Svelte await tags thingy..

If you are already using components, then is the preload prop not getting the job done? In cases like top of the page, I'd be inclined to disable it by setting to 0.

fcage commented

Honestly havent had time to look. We were using the default setup as it's presented in the App.svelte file. You'll see my hack below to set min height.

{:else if block.Type === 'ai-scroller'}
     {#await makeScrollerSteps(block.steps)}
       <div style="min-height: 100vh;"></div>
     {:then steps}
       <Scroller
         steps="{steps}"
         backgroundSize="{block.BackgroundSize}"
         foregroundPosition="{block.ForegroundPosition}"
         id="{block.ID}"
         embedded="{embedded}"
         stackBackground="{false}"
       />
     {:catch error}
       {console.error('Error making steps for scroller', error)}
     {/await}
   {:else}
hobbes7878 commented

Yeah, OK. We actually removed that example from the bluprint at the end of April.

That makeScrollerSteps is where the dynamic component loading comes in, but the component itself just expects actual components passed to it via the steps prop after they're loaded / imported.

So I don't think the component itself needs a change here, BUT I think we need to update the docs for the Scroller component and remove dynamic importing as the recommended way to use it with a google doc.

There's a wider issue of documenting a pattern for how you can still drive the organisation of the content from a doc that came up in reuters-graphics/bluprint_graphics-kit#73 so it ties in to some wider work I want to do.

Anyway, I'll add this to my list of ToDos, but it won't happen for a week or two, probably.

In your case, Feilding, I think the answer is to look at the docs and skip using makescroller steps on this story. I'm happy to consult on how to do that if you like.