UI: Add preloading to stories highlighted in the sidebar

[ndelangen]

What I did

Optimizations:

• When you hover over a story in the sidebar we could sent a message to the preview the user is likely to go to that story.
• When a user navigates to a story using the keyboard shortcuts we could sent a message to the preview the user is likely to go to that story.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit df77b98. 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=8 --max-parallel=15 -- --reset --optimized

---

Sent with 💌 from NxCloud.

[tmeasday]

I tried this out and found two problem:

1. When mousing over the sidebar, it only preloads at the story level, which is "too late" as a sibling story will already have been loaded. (similar when using the keyboard).

2. It doesn't do anything in the search panel. I thought we planned to do similar behaviour on mouse/keyboard selection?

[tmeasday]

Meant to request changes

[ndelangen]

@tmeasday I think I made all the requested changes

[tmeasday]

Functionally it works great now.

I did notice the target attribute doesn't seem consistent:

Also, I wonder if we should just add an api.preloadStory method to the stories module to avoid repeating the logic all over the place.

[yannbf]

I tested in different projects using webpack4 and 5 and the behavior is super awesome!

There was one scenario that didn't go really well (kind of expected to be honest @tmeasday) which is when using LazyCompilation. If the user hovers over +10 stories fast, then webpack goes haywire:

webpack5lazycompilation.mov

[ndelangen]

Should report as a bug to webpack I guess.

I propose we add a debounce here:
https://github.com/storybookjs/storybook/pull/17964/files#diff-1c750d3374a0e928fde974aae523e9257f6b6c23321e70527841850683609419R212-R226

[tmeasday]

Ok! Wanna add it in this PR or another next cycle?

[ndelangen]

I'd be in favor of merging this, and creating a new task for next cycle

[tmeasday]

@ndelangen there seems to be some stories failing

[tmeasday]

LGTM