Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

React demo 8.1.8 splashscreen


Hi there,

I see there was an update regarding the splashscreen logic but I don't really understand how it is hooked together. I don't see anywhere MetronicSplashScreenProvider being used as a wrapper so I can't really invoke the splashscreen anywhere in my app. I have previously implemented my own splashscreen logic modifying the Metronic demo, but I want to see what is the idea behind your logic so I may reuse as much as possible to avoid all the rewrite on every update.

Can you please let me know how would one use the LayoutSplashScreen and how does it work actually?

Best wishes,
Tamas


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 (6)


Hi Tamas,

Thank you for reaching out to us.

The MetronicSplashScreenProvider isn't used in our theme and it will be deleted in the next releases, you can enable and disable loading by adding a "page-loading" class on the body.


//enables loading
document.body.classList.add("page-loading")

//disables loading
document.body.classList.remove("page-loading");


In public/index.html loading class is added to show the loading screen on page first load, this class gets removed because we reset body classes in file src/_metronic/layout/core/_LayoutSetup.ts insideinitLayoutSettings function.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

Thanks for your response.

I understand, so the implementation is basically for first page load. Then it's no problem, I'll implement my custom loading screen that can be called on demand when needed.

Can you please clarify the purpose of the following in App.tsx? This got me confused of how all is hooked together:


<Suspense&nbsp;fallback={<LayoutSplashScreen&nbsp;/>}>


What is LayoutSplashScreen used for in this context? Thanks.

Best wishes,
Tamas



Hi Tamas,

This is also leftover from Metronic older version, this was used to display a full-page loading screen when dynamic components are loaded.

In the new version, we have added SuspensedView component in src/app/routing/PrivateRoutes.tsx, which displays a progress bar on top of the page, when we are loading page modules.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

Thanks for the update. I understand. In this case, it would be great if the oboslete parts of the code were removed to avoid such confusions in the future. Anyway, now at least it is clear what the intention of the SplashScreen is and how it should be used.

Thanks for your helpful and prompt clarification!

Best wishes,
Tamas



Hi Tams,

I added a task to remove this code from Metronic React, we will update it in the next releases.

Please don't hesitate to reach out if you need anything more from us.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi Lauris,

Thank you, that's awesome.

Best wishes,
Tamas


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  :(