Add Activity Loader on Initial Page Load

[AceTheCreator]

Right now, when the page loads for the first time, there’s a flash where it renders without styles, it basically looks like raw HTML for a moment. This creates a broken experience and makes it feel like something’s broken, especially on slower networks.

To smooth things out, we should add an activity loader that shows while the styles and components are rendering. This gives users some visual feedback and prevents the weird unstyled flash.

So here's what should happen:

• Add a basic loading indicator(I'll probably prefer a skeleton 💀 ) that show on initial load
• Ensure it disappears once everything is styled and rendered properly
• We should probably keep it simple and lightweight so users don't experience noticeable delay
• Ensure it is tested on slow 3g

[AceTheCreator]

Assigned to @catosaurusrex2003

[catosaurusrex2003]

@AceTheCreator The majority of the load time is actually due to playground loading styles and assets for the text editor.

Also FOUC can't really be solved by adding a loader, since the loader itself relies on CSS to render properly (please correct me if I’m wrong).

That said, I’ve raised a PR to show a loading screen during schema parsing inside the component, which is a part we can control from within the React app.

[AceTheCreator]

@catosaurusrex2003 I completely agree with your point about the FOUC concept, it makes sense. Given that this is centered around the playground, it might not be a big concern, so we could consider removing it altogether.

Instead of using an activity loader, what do you think about auto-scrolling and highlighting the component where a change is reflected whenever the schema is modified in the playground? That might provide a more seamless and interactive experience for the playground users.

[catosaurusrex2003]

Instead of using an activity loader, what do you think about auto-scrolling and highlighting the component where a change is reflected whenever the schema is modified in the playground? That might provide a more seamless and interactive experience for the playground users.

I agree that is more imp than this one. Will create a POC issue and work on it.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[AceTheCreator]

Closing, as the slowdown is due to the playground and not the library.