Component Sidebar: Preview tab

[jmakowski1123]

To be completed after: #1045

1. Whenever the Component sidebar is first opened, the Preview tab is automatically opened.
2. The Preview tab contains a thumbnail image with a preview of the content.
3. There is an Expand button that open a full screen image of the content with an option to close out of the full screen preview with an "x".

[rpenido]

@jmakowski1123 @lizc577 @sdaitzman @marcotuts This is ready for AC testing on the sandbox

[sdaitzman]

Thanks, @rpenido. Overall, this looks great to me. On Safari, I notice a significant lag and ~300-3000ms freeze in page responsiveness while previews load in the sidebar and expanded preview. It's long enough that clicking between several components causes significant delay, and it doesn't seem like the network requests are being cached (loading a component a second time or expanding the preview causes the same delay).

No issues on Chrome, and it's fast enough on Firefox to be usable. I'm testing on macOS Safari Version 18.0 (20619.1.26.31.6). Let me know if you want me to capture and share an event/network request timeline dump from the web inspector.

[rpenido]

Thank you for the feedback @sdaitzman!
I would appreciate it if you could share the network timeline, as I don't have a Safari to reproduce the issue locally.

[sdaitzman]

Hi @rpenido here are some screenshots of a timeline I just captured. The click event begins at 1.45s and the text is fully rendered with scripts loaded in at 7.4s (no screenshots were captured in between, but I think that lines up with the latency I saw this time, which is longer due to the timeline capture). It looks to me like the latency occurs while MathJax is loading in. I haven't tested on stock Safari, so it's always possible this is an issue caused by some extension I use.

From a UX perspective, a multi-second blocking delay that prevents other interactions is significant, but this one seems to only affect Safari. I'd defer to @jmakowski1123 on how important this is. If we do care about supporting Safari, I think it would be totally fine to either:

• Cache whatever loads the first time, so the blocking delay of a few seconds only happens the first time a component preview is being loaded in (not every time)
• Remove the blocking part of the delay, so previews take up to a few seconds to load, but users can still navigate between components quickly without a noticeable interruption

---

Here's an equivalent timeline from Safari on an iPad:

[rpenido]

I'm unsure what is happening here as I'm unfamiliar with Safari.

Remove the blocking part of the delay, so previews take up to a few seconds to load, but users can still navigate between components quickly without a noticeable interruption

Are you experiencing a screen freeze preventing you from interacting with other components while the preview is loading? This definitely shouldn't happen.

@bradenmacdonald Do you use a Mac, right? Can you check if you experience the same thing?

[lizc577]

FWIW, I tested it out on Safari and am not seeing this lag. @sdaitzman are you able to continually reproduce the lag issue?

[bradenmacdonald]

@sdaitzman @rpenido @lizc577 I tested it on Safari 17.5 and am not seeing any issues. Maybe it's something in Safari 18?

Safari.mov

[sdaitzman]

@bradenmacdonald could be, or could certainly be an issue caused by an extension. Here's the performance I see:

Screen.Recording.2024-09-19.at.3.29.44.PM.mov

[bradenmacdonald]

@sdaitzman Oooof. Yeah, something is very wrong there. Can you try in a Private Browsing window? That should disable most extensions.

[sdaitzman]

@bradenmacdonald already tried a Private Browsing window, same performance there. I'll create a fresh macOS user to really make sure. I did notice a sourcemap loading error that repeats every time a component is selected, though I doubt it's connected:

[bradenmacdonald]

I also noticed this error in your video. I'm not seeing any similar errors on my end.

Source Map errors shouldn't cause any issues.

[sdaitzman]

Huh, I can't reproduce the performance issue on a fresh macOS user account, so it's probably something specific about my macOS/iPadOS Safari configuration.

[bradenmacdonald]

Thanks for digging into it @sdaitzman ! We'll keep an eye out in case anyone else encounters something similar. I'll also check after I upgrade to Safari 18.

[jmakowski1123]

When I click the expand button from the preview on text or problem blocks with significant amounts of text, the expanded preview has a spillover issue

[bradenmacdonald]

@rpenido In addition to the above bug with the layout on small screens ^, we still have an issue that it's not possible to click on any component in the sidebar preview. Links, buttons, etc. don't work until you "Expand" to view the full preview.

[rpenido]

we still have an issue that it's not possible to click on any component in the sidebar preview

This was intended @bradenmacdonald. There is a div on top of the preview to prevent interaction.
I will create a quick PR to remove that.

Edit:

• fix: remove preview overlay from component sidebar #1323