Too many props causes "GPU Process" CPU usage to skyrocket and causes visual artifacts on screen

[jayantbh]

Adding just this addon in Storybook 5.2.1 causes some issues.
If I view a component with few props to show, it works fine enough. But, if the components props type signature is something like:

type Props = {
 customValue: any
} & HTMLAttributes<HTMLDivElement>

Then it takes ages to render the table, and causes GPU usage to skyrocket, and causes visual artifacts all over the screen as if the system is dying.

I guess it struggles with showing too many props? Is this a known issue?

I'll list the contents of the relevant files.

addons.ts

import 'storybook-addon-react-docgen/register';

presets.js

module.exports = ['@storybook/addon-docs/react/preset', '@storybook/preset-typescript'];

config.tsx

import React from 'react';
import { configure, addParameters, addDecorator } from '@storybook/react';
import { withPropsTable } from 'storybook-addon-react-docgen';

import themeConfig from './theme';
import './scss-loader.scss';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import { MyTheme } from 'styles/MyTheme';

addParameters({
  options: {
    theme: themeConfig,
  },
});

const styles = {
  margin: '40px',
};

const componentWrapperDecorator = (storyFn: () => React.ReactNode) => (
  <MuiThemeProvider theme={MyTheme}>
    <div style={styles}>{storyFn()}</div>
  </MuiThemeProvider>
);

addDecorator(componentWrapperDecorator);
addDecorator(withPropsTable);

configure(require.context('../stories', true, /\.stories\.tsx$/), module);

webpack.config.js

module.exports = ({ config }) => {
  config.resolve.extensions.push('.ts', '.tsx');
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve('awesome-typescript-loader'),
      },
      // Optional
      {
        loader: require.resolve('react-docgen-typescript-loader'),
      },
    ],
  });

  return config;
};

[hipstersmoothie]

It's odd that it makes your browser run slow. I am open to prs to improve perf.

In general though I don't think it the best experience to show all the html attributes in the prop panel. Users will get that in their IDE, in storybook it find it nicer to just show the react props you define.

Here's how:

     {
        loader: require.resolve('react-docgen-typescript-loader'),
        options: {
          tsconfigPath,
          propFilter(prop) {
            if (prop.parent) {
              return !prop.parent.fileName.includes('@types/react');
            }

            return true;
          }
        }
      }

[hipstersmoothie]

added some docs around this