Comment component docs in Storybook cause the browser to hang about cloudfour.com-patterns

[gerardo-rodriguez]

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. 🔍 👀

[calebeby]

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

[gerardo-rodriguez]

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

[calebeby]

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

[gerardo-rodriguez]

Thanks, @calebeby, taking a look now!

[gerardo-rodriguez]

@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]

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

[calebeby]

@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