storybookjs/storybook

[Bug]: Composition - initial loading state looks like the error state

Open

#21,509 opened on Mar 9, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
bugcompositionhelp wantedsev:S3

Description

Describe the bug

When compositing a ref it looks like it's initially erroring, then loads anyway.

When there's an actual error (reported the CORS error in #21501 and #21500 ) it can get stuck in the loading state, and not show the error state.

When trying to compose https://59c59bd0183bd100364e1d57-jjsanukdmo.chromatic.com/ (private Chromatic from Chromatic) I get the following error on the browser:

Access to fetch at 'https://59c59bd0183bd100364e1d57-jjsanukdmo.chromatic.com/index.json' from origin 'http://localhost:6006/' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.

Additionally, the sidebar and tooltip stay in an infinite loading state

To Reproduce

  • add a ref
  • load the storybook
  • look at the sidebar as storybook loads

System

No response

Additional context

No response

Contributor guide

Tech stack
reacttypescript
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Storybook basicsReact stateUI component loading states
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the composition feature's loading state handling. Look at the sidebar component and the ref loading logic in Storybook's UI code. Check related issues #21501 and #21500 for additional context. Examine how errors are caught and displayed during composition.