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.

Sign up for GitHub

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

Jump to bottom

Retain loaded design tab contents per story #153

Closed
4 of 5 tasks
Philzen opened this issue Jun 3, 2022 · 3 comments · Fixed by #157
Closed
4 of 5 tasks

Retain loaded design tab contents per story #153

Philzen opened this issue Jun 3, 2022 · 3 comments · Fixed by #157
Assignees
@pocka
Labels
category: feature New feature or request
Milestone
v7.0

Comments

@Philzen
Copy link
Contributor

Philzen commented Jun 3, 2022 •
edited
Loading

Opportunity

It's often frustrating when looking at the design tab, then switching to another tab (i.e. the controls tab to change some prop) and then returning to the design tab, only to find that the design being loaded all over again. Loading figma or figspec designs can take a considerable amount of time (~5 secs in average).

Solution

Once loaded, the design tab content should be retained in memory, at least until the user navigates to another story in the left sidebar.

Design types

  • figma
  • figspec
  • link
  • image
  • iframe
@Philzen Philzen added the category: feature New feature or request label Jun 3, 2022
@pocka
Copy link
Collaborator

pocka commented Jun 13, 2022 •
edited
Loading

The current design (returns null when inactive) is based on a11y addon and actions addon. I checked the current recommended way and it seems using AddonPanel (imported from @storybook/components) is the best way to render panel content in v6.x.

Tested on local repository and it worked but had reset problem on multiple designs (inner tabs). I would open a PR once I solved the problem or gave it up.

@pocka pocka added the good first issue Good for newcomers label Jun 13, 2022
@pocka pocka added this to the v7.0 milestone Jun 14, 2022
@pocka pocka self-assigned this Jun 16, 2022
@pocka pocka removed the good first issue Good for newcomers label Jun 16, 2022
pocka added a commit that referenced this issue Jun 16, 2022
@pocka
perf: Do not destroy rendered contents on tab changes
5528baf 
Almost all of embed-type this addon supports take a few seconds to load.
The problem is, when a user moves to another addon tab then returns to
a "Design" tab, the tab contents restarts the whole rendering process
including network access. In order to eliminate this unnecessary
loading, I changed the panel rendering so it remains on DOM once after a
user enters the "Design" tab on the story.

#153
@pocka pocka mentioned this issue Jun 16, 2022
Merged
@pocka
Copy link
Collaborator

pocka commented Jun 18, 2022

Fixed in v7.0.0-alpha.1.

@Philzen
Copy link
Contributor Author

Philzen commented Jun 25, 2022

Awesome, @pocka thanks heaps!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@pocka pocka

Labels
category: feature New feature or request
Projects
None yet
Milestone
v7.0
Development

Successfully merging a pull request may close this issue.

Do not destroy rendered contents on addon tab changes storybookjs/addon-designs
2 participants
@Philzen @pocka