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: ```jsx const MyButton = () => (

); ``` Append this to index.css: ```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" />`
        }),
}