SB geting stuck when using global decorator with StyleSheetManager

[ChrisKuBa]

Describe the bug
Storybook getting stuck for some seconds when using styled component StyleSheetManager as global decorator within preview.js AND a story, where story args and component props with children will be used.

The resulting effect between a working and a stucking story is, that the working story uses the skipJsxRender and the hanging story the jsxDecorator with many prettyPrint calls.

To Reproduce

npm i -D react react-dom @babel/core styled-components
npx sb init --builder webpack5

modify ./storybook/preview.js

import { StyleSheetManager } from 'styled-components';

export const decorators = [
  (Story) => (
    <StyleSheetManager>
        <Story/>
    </StyleSheetManager>
  ),
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

use new stories Demo.stories.jsx

import React from 'react';

const DemoComponent = ({ otherChildren, children }) => (
    <>
        {otherChildren}
        {children}
    </>
);

export default {
    title: 'Components/Demo',
    component: DemoComponent,
};

// OK
const DemoTemplateA = (_args) => <DemoComponent>{[<div>DemoA</div>]}</DemoComponent>;
export const DemoA = DemoTemplateA.bind({});

// OK
const otherChildren = [<div>DemoB</div>];
const DemoTemplateB = (_args) => <DemoComponent otherChildren={otherChildren} />;
export const DemoB = DemoTemplateB.bind({});

// OK
const DemoTemplateC = () => <DemoComponent otherChildren={[<div>DemoC</div>]} />;
export const DemoC = DemoTemplateC.bind({});

// this getting stuck - only the _args parameter was added in comparison with DemoC
const DemoTemplateD = (_args) => <DemoComponent otherChildren={[<div>DemoD</div>]} />;
export const DemoD = DemoTemplateD.bind({});

start storybook

npm run storybook

and selecting the DemoD story.

System

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 16.9.1 - C:\Program Files\nodejs\node.EXE
    npm: 7.21.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.76)
  npmPackages:
    @storybook/addon-actions: ^6.4.18 => 6.4.18
    @storybook/addon-essentials: ^6.4.18 => 6.4.18
    @storybook/addon-links: ^6.4.18 => 6.4.18
    @storybook/builder-webpack5: ^6.4.18 => 6.4.18
    @storybook/manager-webpack5: ^6.4.18 => 6.4.18
    @storybook/react: ^6.4.18 => 6.4.18

Additional context
performance measurement of DemoTemplateC

performance measurement of DemoTemplateD

If you use a more complex global style configuration like we did, it breaks completely (GlbalStyle, Fonts, ..., Zindex using createGlobalStyle).

<StyleSheetManager disableVendorPrefixes>
        <ThemeProvider theme={defaultTheme}>
            <GlobalStyle />
            <Fonts />
            <Colors />
            <Picker />
            <Zindex />
            {children}
        </ThemeProvider>
    </StyleSheetManager>

[augustl]

Can confirm, I'm experiencing this exact issue using the latest version of storybook.