[Bug]: Global async decorator breaks default background
#21,067 opened on Feb 13, 2023
Description
Describe the bug
I have a global async decorator (added in preview.tsx) that returns null until an async operation is completed. This async decorator breaks default background, both set globally or overriden on a story.
I made a repro here : https://github.com/Mattgic/repro-sb-backgrounds-issue Background can be changed manually but default background (both set globally and story override) doesn't work.
Working on this repro I realise that the first story "docs" doesn't work. There is probably an issue with making such an async decorator, maybe it's an anti-pattern. If needed I can explain why I need such a thing.
My decorator looks like this :
const AsyncLoader: FC<{ children: ReactNode }> = ({ children }) => {
const [isReady, setIsReady] = useState(false);
useEffect(() => {
setTimeout(() => {
setIsReady(true);
}, 1000);
});
// Background override works if we disable this block
if (!isReady) {
return null;
}
return <>{children}</>;
};
const fontLoaderDecorator = (StoryFn): JSX.Element => {
return (
<AsyncLoader>
<StoryFn />
</AsyncLoader>
);
};
Note that if I add this decorator in each of my stories file, everything works fine. Problem only occurs when decorator is added globally, in preview.tsx.
To Reproduce
https://github.com/Mattgic/repro-sb-backgrounds-issue
System
Environment Info:
System:
OS: macOS 13.2
CPU: (8) arm64 Apple M1
Binaries:
Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
Browsers:
Chrome: 110.0.5481.77
Firefox: 109.0.1
Safari: 16.3
npmPackages:
@storybook/addon-essentials: ^7.0.0-beta.46 => 7.0.0-beta.46
@storybook/addon-interactions: ^7.0.0-beta.46 => 7.0.0-beta.46
@storybook/addon-links: ^7.0.0-beta.46 => 7.0.0-beta.46
@storybook/blocks: ^7.0.0-beta.46 => 7.0.0-beta.46
@storybook/node-logger: ^7.0.0-beta.46 => 7.0.0-beta.46
@storybook/preset-create-react-app: ^4.1.2 => 4.1.2
@storybook/react: ^7.0.0-beta.46 => 7.0.0-beta.46
@storybook/react-webpack5: ^7.0.0-beta.46 => 7.0.0-beta.46
@storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
Additional context
No response