Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Show Page Loading Spinner Until Javascript Has Loaded?


Is it possible to setup a keen theme to immediately show a page-loader (modal spinner), so that I can hide it later once my Javascript has finished initialising?

Using KTApp.showPageLoading() isn't suitable because it isn't guaranteed to run immediately.

Are there any classes or attributes I can add to the page-loader (or body tag or whatever) to cause it to be immediately open (and stay open) such that I can then hide it later using KTApp.hidePageLoading() once the page is ready for use?

Basically I'm looking to prevent slower loading pages from being interactive before they're ready, with some kind of loading indicator.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


When I was optimizing my website, Florida Swim Center, I wanted to make sure visitors wouldn’t interact with the page before all JavaScript was fully initialized. To handle this, I added a simple loading spinner that displays immediately on page load and hides once the site is ready.

Here’s a quick overview of what I did:

Added a Preloader:
I included a div in my HTML in my website for the loader and styled it to cover the entire viewport with a centered spinner.

Styled the Spinner:
I used basic CSS to create a circular spinner animation.

Hid the Spinner After JavaScript Initialization:
Using a small JavaScript snippet, I ensured the spinner disappears once everything has finished loading by targeting the loader’s display property.



Hi,

Please check the initial page loading option:
https://preview.keenthemes.com/html/keen/docs/base/page-loading#initial

This should be what you looking for.

Regards,
Sean


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(