[Explorer] Smoother page loads

[jaydeluca]

When loading pages for the first time, things often load in strange orders and things jump around a bit before being presented to the user.

The https://explorer.opentelemetry.io/java-agent page is an example, where the "news" section loads after the other panels sometimes.

We should investigate better ways to handle async data loading and the way we present pages to the user so it doesn't feel like 8 different components are all loading and updating the page independently

[malydev]

Hi! @jaydeluca I'd like to work on this issue if it's still available.

I'll first reproduce the loading behavior locally and investigate how the async data fetching is currently organized. Then I'll propose an approach to make the page loading feel smoother before opening a PR.

[malydev]

Hi @jaydeluca! I've opened PR #894 with a proposed approach for this issue.

I used the Java Agent announcements section as an example implementation. Instead of returning null while loading, the section renders immediately with skeleton placeholders to reserve its layout space and reduce layout shifts.

My intention is to validate whether this is the direction you'd like to take before applying the same pattern to other sections that load asynchronously.

If this approach looks good, I'd be happy to extend it to the remaining parts of the page where it makes sense. Feedback is very welcome!

[jaydeluca]

hey @malydev your approach with the skeleton placeholders does look good! It still is jumpy when you load the page right now because we only have one actual news item and theres two skeleton placeholders, but that will sort itself out when we have more entries.

My original thought was instead of just doing that one section, if we could prevent loading any of the content on the page until all the network requests have completed. I'm not sure if that would be a better experience. My thinking is to reduce the movement of the page as much as possible.

[malydev]

Thanks @jaydeluca for the feedback! I understand the original direction better now.

The alternative would be to keep a single page-level loading state until all required network requests have completed, and then render the full page at once. That would minimize layout movement more effectively than section-level skeletons.

My only concern is that a slow request could block the entire page for a noticeable amount of time, especially on slower connections. With section-level skeletons, the page structure appears earlier, but there may still be some movement when the actual item count differs from the placeholders.

I can investigate the page-level loading approach and compare both behaviors. One possible middle ground would be to render a full-page skeleton matching the complete page layout, then replace it once all requests finish.

[jaydeluca]

My only concern is that a slow request could block the entire page for a noticeable amount of time, especially on slower connections.

yes, i share this concern. we're already dealing with a bit of a wait for the content of the agent comparison tool page to load, I hate to make that experience more widespread. There aren't too many requests though, so maybe we could test it out.

I can investigate the page-level loading approach and compare both behaviors. One possible middle ground would be to render a full-page skeleton matching the complete page layout, then replace it once all requests finish.

👍 looking forward to hearing your thoughts on the results of testing it out. Thanks!