Snapshot delay

[d3vl1m3]

For specific stories, is it possible to add a delay to allow a story/animation to fully load in before taking the snapshot?

I know there is the isLokiRunning() but it would be good as a quick fix for my time for now to be able to delay the snapshot being taken.

[techeverri]

You can use @loki/create-async-callback as explained here: #258

[d3vl1m3]

Ah! Wait. Nope. I've looked at this a few times and still don't get it. If adding this to a mature library that example makes it look like I need to extend the component to work with this.

Am I misunderstanding it or is this something that can be added in via config?

I don't want to add a callback, I want to set a global delay.

[d3vl1m3]

Nope. Can't get this to work even following what I thought was working in my answer.

Do you have any examples of this working that don't use 'ofStories'?

[d3vl1m3]

Wait! Yes it is! What is happening!!?!? FML. I'm going to comb through it properly to see why I thought it wasn't working.

[d3vl1m3]

Okay. Figured it out without using the storiesOf.

You can use this as a custom hook or a component - both seem to work well:

// use-delay-capture.hook.jsx
import {useEffect} from 'react';
import isLokiRunning from '@loki/is-loki-running';
import createAsyncCallback from "@loki/create-async-callback";

const useDelayCapture = (delayInMs = 1000) => {
  useEffect(() => {
    if ( isLokiRunning() ) {
      const onDone = createAsyncCallback();
      const timer = setTimeout(() => onDone(), delayInMs);
      return () => clearTimeout(timer);
    }
  }, [delayInMs]);
}
export default useDelayCapture;

OR

// delay-capture.component.jsx
import React, {useEffect} from 'react';
import isLokiRunning from '@loki/is-loki-running';
import createAsyncCallback from "@loki/create-async-callback";

const DelayCapture = (props) => {
  const { delayInMs = 1000} = props; 

  useEffect(() => {
    if ( isLokiRunning() ) {
      const onDone = createAsyncCallback();
      const timer = setTimeout(() => onDone(), delayInMs);
      return () => clearTimeout(timer);
    }
  }, [delayInMs]);

  return null;
}

export default DelayCapture;

---

Used accordingly in the story template function as:

// example.stories.jsx
const Template = () => {
  useDelayCapture();
  // Or with a prop. e.g:
  // useDelayCapture(2000);

  return <VideoComponent />
}

OR

// example.stories.jsx
const Template = () =>  <>
  {/* Your component here first */}
  <FooBar/>

  {/* Then the delayed one holds off the screen capture whilst yours does its thing */}
  <DelayCapture />
  {/* Or with a prop. e.g: */}  
  {/* <DelayCapture delay={2000} /> */}
</> ;

Loki update now passes and the rendered capture shows the following: