preload/prefetch Stories

[hannadrehman]

We should be able to preload next story. it will help improving next story performance.

we can have similar api to enable preloading

export default function ComponentStories() {
  const stories = [
    {
      type: 'component',
      duration: 9000,
      component: HelpText,
    },
    {
      type: 'component',
      duration: 30000,
      component: ComponentWithInteractions,
    },
    {
      duration: 9000,
      type: 'component',
      component: ComponentApi,
      shouldPreLoad:true/false // why ? because dev can chose to not pre render certain strories.
    },
  ];

  return (
    <div>
      <Stories 
          width="400px" 
          height="600px" 
          stories={stories} 
          preLoadNextStory // globally enable pre render for all stories
          noOfPreLoadStories={2}  // no of stories to pre render.
         />
    </div>
  );
}

we could use preloading or prefetching. here is a decent resource for difference between prefetching and preloading

example:

    <link rel="prefetch" as="image" href="important.png">
   <link rel="preload" as="image" href="important.png">

both will work fine for image and video stories. we need to think how to preload component stories

[quedicesebas]

Using @remotion/preload #39