Timeout in stories with looping animations in managed mode while working in simple mode

[aolde]

I'm trying to use the managed mode after having used the simple mode for a while. However when moving over to managed mode, stories that display looping animations fail to complete, with a timeout error. In simple mode it successfully record a screenshot.

I've tried to see if there is different logic or config between simple/managed mode but haven't found anything yet. --disableCssAnimation is turned on. Any idea where to look next?

warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. Components/Buttons/Button Button Loading
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. Components/Buttons/Load more Loading
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. Components/Buttons/Button Button Loading
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. Components/Buttons/Load more Loading
error Screenshot timeout exceeded. 'capture' function is not triggerd in 5000 ms. Target story: Components/Buttons/Button/Button Loading
ScreenshotTimeoutError: Screenshot timeout exceeded. 'capture' function is not triggerd in 5000 ms. Target story: Components/Buttons/Button/Button Loading
    at Timeout._onTimeout (/Users/.../node_modules/storycap/lib/node/capturing-browser.js:146:28)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Example of how component looks:

Output in simple mode:

info Screenshot stored: __screenshots__/Components/Buttons/Button/Loading.png in 354 msec.

[aolde]

I'm able to replicate this in the examples/v6-managed-react repo now.

Replicate steps

Update MyButton.jsx to:

const MyButton = () => (
  <button className="my-button">
    <div className="loader_2caR1 animate_3Ztgu">
      <svg className="loader_qYoLV" viewBox="0 0 100 100">
        <circle className="still_1h8-4" cx="50" cy="50" r="45"></circle>
        <circle className="hunter_2WYKX" cx="50" cy="50" r="45"></circle>
      </svg>
    </div>
  </button>
);

Append this to index.css:

.loader_qYoLV {
  animation: svgAnimation_3eFxZ 2s linear infinite;
  width: 24px;
  height: 24px; 
}
.loader_qYoLV .still_1h8-4 {
  width: 100%;
  fill: transparent;
  stroke: #ebeff5;
  stroke-width: 10; 
}
.loader_qYoLV .hunter_2WYKX {
  width: 100%;
  fill: transparent;
  stroke: #eb145f;
  stroke-width: 10;
  stroke-dasharray: 283;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  stroke-dashoffset: 280;
  animation: circleAnimation_J4luD 2s ease-in-out infinite both;
}
@keyframes svgAnimation_3eFxZ {
  0% {
    transform: rotateZ(0deg); }
  100% {
    transform: rotateZ(360deg); } 
}
@keyframes circleAnimation_J4luD {
  0%,
  25% {
    stroke-dashoffset: 280;
    transform: rotate(0); }
  50%,
  75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg); }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg); } 
}

What I have noticed is that when running Storycap in headless:false the disable-css-animation CSS is added to the document for the first variants but then it's skipped, so the spinner starts animating again.

To confirm this I added the disable-css-animation CSS to my projects code and then it runs through successfully. So I will use that as a workaround.

Command used:

cd storycap/examples/v6-managed-react
yarn storybook
npx storycap http://localhost:9008 --puppeteerLaunchConfig '{ "headless": false,  "args": ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"] }' -p 1 --include MyButton/*

[sag1v]

Is there a better solution for that?

@aolde's workaround doesn't work for me BTW (disabling the transitions and animations that is)

[akbarnafisa]

any updates for this issue? it seems the skip option is not working when this issue occurs, so you need to exclude the story to skip the screenshot

[kodai3]

Hi, the similar issue occur using js animation like framer motion (which has no flag to disable all animations https://github.com/framer/motion/issues/1160). If we have infinite animation it times out and can't skip with the skip option.

I hope this issue moves forward...

[harunari0928]

This timeout issue also occurred to me. I don't think it matters whether it's simple mode or not. It seems like this problem occurs when there are animate tags in the story. I avoided the problem by deleting these tags after rendering. Like this (I'm using storybook with vue.)

export const Loading = {
    render: (args: any) => ({
        components: { Component },
        setup() {
            onMounted(() => {
                // remove animate tags after rendering
                for (const node of document.querySelectorAll('animate')) {
                    node?.remove();
                }
            },
            template: `<Component v-bind="args" />`
        }),
}