Addon-docs: Improved loading state

[tmeasday]

What I did

Improvements to docs loading state.

Still TODO

• Final UI tweaks from @MichaelArestad
• Rationalization of loading props @tmeasday
• Investigate flickering of preview component @tmeasday
• Investigate components rendering whilst still "preparing" @tmeasday
• Fix stories to render consistently in chromatic

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
  Yes, see examples in PR

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit d3a4b08. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[shilman]

I'm getting this error when I click on react-ts AccountForm stories in docs mode, but I'm not seeing it in the built storybook for next (haven't investigated whether this is an issue with dev mode or with the branch)

[tmeasday]

@shilman

I'm getting this error when I click on react-ts AccountForm stories in docs mode, but I'm not seeing it in the built storybook for next (haven't investigated whether this is an issue with dev mode or with the branch)

I'm pretty sure this problem is caused by this code:

storybook/addons/docs/src/blocks/SourceContainer.tsx

Lines 22 to 38 in dd0821c

	const handleSnippetRendered = (id: StoryId, newItem: SourceItem) => {
	if (newItem !== sources[id]) {
	setSources((current) => {
	const newSources = { ...current, [id]: newItem };
	if (!deepEqual(current, newSources)) {
	return newSources;
	}
	return current;
	});
	}
	};
	channel.on(SNIPPET_RENDERED, handleSnippetRendered);
	return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
	});

Perhaps we should revert it to the version that we have on main given I think we only changed it for reasons that we later reverted? I don't remember, anyway you can see the version on main is doing complex stuff to avoid this problem:

storybook/addons/docs/src/blocks/SourceContainer.tsx

Lines 21 to 41 in 69dbf36

	const sourcesRef = React.useRef<StorySources>();
	const handleSnippetRendered = (id: StoryId, newItem: SourceItem) => {
	if (newItem !== sources[id]) {
	const newSources = { ...sourcesRef.current, [id]: newItem };
	sourcesRef.current = newSources;
	}
	};
	// Bind this early (instead of inside `useEffect`), because the `SNIPPET_RENDERED` event
	// is triggered *during* the rendering process, not after. We have to use the ref
	// to ensure we don't end up calling setState outside the effect though.
	channel.on(SNIPPET_RENDERED, handleSnippetRendered);
	useEffect(() => {
	const current = sourcesRef.current || {};
	if (!deepEqual(sources, current)) {
	setSources(current);
	}
	return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
	});

[shilman]

LGTM!