Slow performance when using addon with 1000 style tokens about storybook-design-token HOT 10 CLOSED

The rendering itself seems to be the bottleneck. Some sort of virtualized scrolling for longer tables should fix it. I'll put it on the list, and try to get to it as soon as possible.

from storybook-design-token.

Hey @Sqrrl ! Tested 2.0.0-beta.0 on a repo with roughly 1100 tokens and the performance was great. Your changes seemed to have worked to returning performance to normal.

from storybook-design-token.

Hey @Sqrrl - having a similar problem here. The SB is getting slower as we scale - any pro tips here?

from storybook-design-token.

It would be helpful to be able to disable the panel as I see less benefit in that than using the doc blocks anyway.

from storybook-design-token.

I'm looking into the performance issues.

@laddi-netapp You can deactivate the addon panel by removing it from your main.js. The doc blocks should still work. See #44 (comment)

from storybook-design-token.

Yes and no, when I do that, I get all kinds of problems, it seems:

css-syntax-error.js:37 Uncaught (in promise) CssSyntaxError: ./components/elements/button/button.css:1:1: Unknown word
    at Input.error (input.js:148:1)
    at Parser.unknownWord (parser.js:520:1)
    at Parser.other (parser.js:151:1)
    at Parser.parse (parser.js:59:1)
    at parse (parse.js:11:1)
    at new LazyResult (lazy-result.js:133:1)
    at Processor.process (processor.js:28:1)
    at postcss.parser.js:214:1
    at Array.map (<anonymous>)
    at postcss.parser.js:212:1

from storybook-design-token.

Also, DesignTokenDocBlock doesn't display anything once the plugin has been disabled, at least not for me.

from storybook-design-token.

Thanks @Sqrrl!

from storybook-design-token.

Hey. Just published v2.0.0-beta.0 with some "experimental" changes. It also implements virtual scrolling for tables and pagination for card views to get rid of the performance issues.

Would be great if you check it out.

Migration:

• Bump addon version to v2.0.0-beta.0
• Get rid of the token file loading in your .storybook/preview.js

Before:

const tokenContext = require.context(
  '!!raw-loader!../src',
  true,
  /.\.(css|less|scss|svg)$/
);

const tokenFiles = tokenContext.keys().map(function (filename) {
  return { filename: filename, content: tokenContext(filename).default };
});

export const parameters = {
  designToken: {
    defaultTab: 'Colors',
    files: tokenFiles
  }
};

After:

export const parameters = {
  designToken: {
    defaultTab: 'Colors'
  }
};

from storybook-design-token.

It would be helpful to be able to disable the panel as I see less benefit in that than using the doc blocks anyway.

As it came up here. With v2.1.0 you can disable the addon panel. See https://github.com/UX-and-I/storybook-design-token#disable-the-addon-panel

from storybook-design-token.