UI: Wait 100ms before showing spinner and fix story overlaying it

[tmeasday]

Issue: #17122

What I did

1. Hide user content during preparing, before rendering
2. Ensure we still show the story during rendering (6.4.1: something removes autofocus from all inputs #16847.
3. Wait 100ms before showing preparing (Background is flashing when switching stories #17122)

How to test

For 1. see http://localhost:9011/?path=/story/core-loaders--z-index -- try switching to the other loading story, notice the spinner overlay/hides the z-index story

For 2. see http://localhost:9011/?path=/story/core-rendering--auto-focus

For 3. switch between first two backgrounds stories: http://localhost:9011/?path=/story/addons-backgrounds--story-1

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 0266f52. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[github-actions]

	Fails
🚫	PR is not labeled with one of: ["cleanup","BREAKING CHANGE","feature request","bug","documentation","maintenance","dependencies","other"]

Generated by 🚫 dangerJS against 2af2ad4

[yannbf]

@tmeasday this is great!!! Incredibly better.

I noticed a regression related to loaders, maybe it's out of scope but I thought of sharing:

loadersbug.mp4

[tmeasday]

Just to write down what's in the video:

1. Changing globals re-runs loaders without re-displaying the spinner
2. Docs mode does not display spinner
3. Switching back from docs mode->story mode shows a flash of the "old" story.

Playing with next branch, I think only 3 is a regression here.

Happy to discuss 1&2 but I think we can merge this without fixing them.

[tmeasday]

@yannbf fixed #3.

Thinking about things for a bit:

• Fixing 1. would require calling preview.view.showPreparingStory from inside the StoryRender object, which is a bit messy. OTOH I'm not 100% convinced that showing a spinner is the behaviour we want here. Let's discuss.

• Fixing 2. would require a bit of a refactor of the way the <Story/> doc block works. Definitely a longer term thing. Something to think about in the work we are doing @shilman.

[yannbf]

Thanks @tmeasday! I agree on your points 👍

Can you check CI? Seems like there's a typescript issue