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