cloudfour/cloudfour.com-patterns

Comment component docs in Storybook cause the browser to hang

Closed this issue · 8 comments

tylersticka commented

If you view the Comment component in Storybook and attempt to switch to Docs view, the page completely tanks performance and appears to never resolve (at least in desktop Firefox as of this writing).

The story examples in this page are probably over-engineered (they predate Storybook Controls so it's been a while): If there isn't a quick fix, we may want to simplify things.

(My gut says this may have to do with the unique ID generation the stories are doing. If useEffect is running multiple times (see #1919) then maybe that's just constantly invalidating the stories and causing recompilation? But that's just a guess.)

gerardo-rodriguez commented

This one is a bit of a challenge to figure out. 😅

First, I started by commenting out the initCommentReplyForms(), but that didn't seem to do anything.

Next, I moved the useEffect() that calls initCommentReplyForms() into the decorators attribute on the <Meta>, something like:

<Meta
  title="Components/Comment"
  decorators={[
    (story) => {
      useEffect(() => {
        initCommentReplyForms();
      }, []);
      return story();
    },
  ]}
/>

But that didn't seem to do anything.

My next thing to try is simplifying the makeComment() function. I just reduced it to this:

export const makeComment = () => ({
  approved: true,
  comment_content: 'hello world',
});

And this seems to be making a difference! I don't understand why or what in makeComment() might be causing an issue, though. I'll keep digging. 🔍 👀

  • 👍1
calebeby commented

I remember running into this when I was trying to switch to vite. I think I figured out a way to work around this... if I remember right?

Here is the PR if you want to give it a shot and check if it is fixed there: #2012

I'd like to revisit that PR soon

  • 👀1
calebeby commented

If it is fixed there, I can look into why if you'd like.

gerardo-rodriguez commented

Thanks, @calebeby, taking a look now!

gerardo-rodriguez commented

@calebeby It does seem like it is fixed there!

If I start here: https://deploy-preview-2012--cloudfour-patterns.netlify.app/?path=/story/components-comment--single

Then switch over to the "Docs" tab, Firefox doesn't freeze up like it's doing now.

gerardo-rodriguez commented

This is interesting, the initCommentReplyForms() function is being passed in as the 2nd argument of the template(). 🔍 👀

calebeby commented

@gerardo-rodriguez do you have a few minutes to meet and check in about that PR? I can try to explain how that works and where I left it so we can decide what to do

gerardo-rodriguez commented

@calebeby Sure! I have until about 11:30.

  • 👍1