question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Loading state for panel.html

See original GitHub issue

When opening the devtools for the first time there’s a flash of unstyled content.

It’s probably something we can deal with with x-cloak + a “Loading…” message that gets hidden on Alpine.js bootstrap.

cc @stephenoldham might have an idea of how to tackle this.

See the following gif: Kapture 2020-11-22 at 14 30 41

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
ryangjchandlercommented, Nov 23, 2020

@stephenoldham Very nice!

1reaction
ryangjchandlercommented, Nov 23, 2020

That would be great @stephenoldham

I think the quickest win would be x-cloak on the panel component + a loading spinner/message with x-show="false" (so it disappears on Alpine load)

I think a Loading… message should be good enough. No need for spinners in my opinion 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Loading Spinner — Panel v0.14.2
Every pane, widget and layout provides the loading parameter. When set to True a spinner will overlay the panel and indicate that the...
Read more >
Spinners - Bootstrap
Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.
Read more >
How To Make a Loader - W3Schools
Step 1) Add HTML: ... Another Example. An example of how to place the loader in the middle of the page and show...
Read more >
loading panel with %symbol - javascript - Stack Overflow
I want to display a loading panel with percentage symbol. please share your suggestion. I searched but did not get with %age ....
Read more >
How to show Page Loading div until the page has finished ...
When document.readyState changes, readystatechange event fires and our function executes. If the document is not yet loaded then the body should ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found