Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Comment story performance issue #2048

Merged
merged 4 commits into from
Sep 16, 2022

Conversation

gerardo-rodriguez
Copy link
Member

@gerardo-rodriguez gerardo-rodriguez commented Sep 15, 2022

Overview

This PR fixes the Comment story performance issue that was causing the browser to freeze when viewing the "Docs" tab. The proposed fix is to generate random comments ahead of time instead of inline inside the <Story> elements.

// Before, the makeComment() function was called inline inside each <Story> but
// the randomness caused the stories to render hundreds or thousands of times.
// The page would freeze up. Now, we create a random set of comments ahead of
// time and just reference them in the stories.

Thanks for the idea, @calebeby. It worked! 🎉

Screenshots

Before, navigating to the "Docs" tab would freeze the browser to the point where you couldn't scroll in Firefox. Now, you can scroll through the page:

after

Before

Before, there was a very long yellow JS block, over 10 seconds in the screenshot below:

Screen Shot 2022-09-15 at 2 32 04 PM

After

After, the yellow JS block is not 10+ seconds long:

Screen Shot 2022-09-15 at 2 33 01 PM

Testing

The bug was originally reported in Firefox but test in all browsers.

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).

  1. Load up the "Canvas" tab: https://deploy-preview-2048--cloudfour-patterns.netlify.app/?path=/story/components-comment--single
  2. Switch over to the "Docs" tab and confirm the page doesn't lock up
  3. Reload the "Docs" tab view, and confirm the page doesn't lock up

@changeset-bot
Copy link

changeset-bot bot commented Sep 15, 2022

🦋 Changeset detected

Latest commit: c606df2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudfour/patterns Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify
Copy link

netlify bot commented Sep 15, 2022

Deploy Preview for cloudfour-patterns ready!

Name Link
🔨 Latest commit c606df2
🔍 Latest deploy log https://app.netlify.com/sites/cloudfour-patterns/deploys/63239b0b28cbe70008772141
😎 Deploy Preview https://deploy-preview-2048--cloudfour-patterns.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@gerardo-rodriguez gerardo-rodriguez self-assigned this Sep 15, 2022
@gerardo-rodriguez gerardo-rodriguez marked this pull request as ready for review September 15, 2022 21:37
@gerardo-rodriguez gerardo-rodriguez requested review from tylersticka and a team September 15, 2022 21:37
Copy link
Member

@spaceninja spaceninja left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good and works as described. Thank you!

@gerardo-rodriguez gerardo-rodriguez merged commit 72c76bc into main Sep 16, 2022
@gerardo-rodriguez gerardo-rodriguez deleted the bugfix/comment-story-performance branch September 16, 2022 16:00
@github-actions github-actions bot mentioned this pull request Sep 16, 2022
gerardo-rodriguez added a commit that referenced this pull request Sep 21, 2022
…terns into feature/aspect-ratio

* 'main' of https://github.com/cloudfour/cloudfour.com-patterns:
  Use CSS aspect-ratio property for Avatar (#2055)
  Publish Next Version (#2050)
  Update dependency @types/lodash to v4.14.185
  Support more WordPress table styles (#2052)
  Fix nested rhythm object issue (#2051)
  Fix Comment story performance issue (#2048)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Comment component docs in Storybook cause the browser to hang
2 participants