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

Widget Data Fetching Loading Circle


Hey, I have a few widgets, and I am currently doing a simple axios.get request. My issue is that it takes 1–3 seconds for the widgets to appear as the site is loaded, is there a way to display a loading circle or fetch data before the site is rendered?

I've been searching, but I cannot find any documentation regarding it in the Metronic Docs, so I am pretty lost here. Would appreciate help!


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


Hey, onBeforeMount will still render my page and then after it is done fetching data it will display my widgets. At this point I will rather display a Loading Circle on top of my widget, are there any examples available for me to see? (Including Data Fetching & Handling Loading?)



Hi,

If your request takes some time to process function onBeforeMount will not make your request passes faster but it will send the request before the component gets mounted and you will receive your data a bit faster.

You can find the example in this gist file.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Ah Alright, This solved my issue, thank you



Hi,

Glad to hear that. All the best with your project!

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

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,

Thank you for reaching out to us.

You can move your request code to onBeforeMount function, to start your request before the component mount.

It is always better to handle the loading when you do asynchronous requests. During requests you can show an overlay on your widget, you can find an example <a href='https://preview.keenthemes.com/metronic8/vue/docs/base/overlay#content-blocking'>here</a> or alternatively, you can use <a href='https://element-plus.org/en-US/component/loading.html#loading-inside-a-container'>Element Plus loading component</a>.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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