Loading spinner and dashboard transitions?

Third party integrations HADashboard
1

I know the various reasons dashboards take time to redraw but for those few seconds (in my case update 5 seconds) between dashboard loading would it be a good idea to show some kind of loading spinner overlay to inform the user that something is actually happening?

I was thinking something like SpinKit which is a pure CSS based spinner: http://tobiasahlin.com/spinkit/

Also it would be nice to implement a simple transition between dashboards like these: https://tympanus.net/Development/PageTransitions/

Thoughts?

2

transitions slow down the dashboard load even more.
and i personally dont see the use for a spinner.

but you are free to use spinner and transition in your own custom_skin.

by the way, i always notice that something is done.
the app i use on tablets has a loading balk, and on the pc google chrome show that its busy loading.

3

and i dont think the spinner that you show will do something unless you create a page that loads before the main page gets loaded.
if it is in the actual dashboard page, the css first gets activated when a page is loaded.

4

Thanks for your input. Maybe transitions are a bit of an ask but I still feel a spinner for when you are on a tablet would be a good call. I’m just testing it out now, would you know how I add custom html to a dashboard like below?

<div class="spinner">
  <div class="double-bounce1"></div>
  <div class="double-bounce2"></div>
</div>
5

you need to create a custom skil
http://appdaemon.readthedocs.io/en/latest/DASHBOARD_CREATION.html#skin-development

and then add id to the body.
but like i said it needs to be a preload page (which dashboard doesnt have) or the spinner just gets started when the page is loaded.

6

I was thinking of having the spinner hidden and show It via javascript.

7

but at what moment?
there is no easy way to activate it in the dashboard that is showing (unless you start to change the navigate widget, i think)
and when the new page isnt loaded it cant be activated in the new page, and at the moment that the page is loaded it is obsolete.

i am pretty sure that websites that use such things use a preload page.

8

if I was to replace the navigate widget with a javascript widget could I not ‘string’ commands together? i.e. show spinner then go to desired page? Can navigation be triggered from a javascript command?

9

in theory thats possible, but you cant say: load that page first and after some time that page.
as soon as the first page is loading the code from the last one is deactivated.

so it needs to be:

  • trigger the spinner
  • load the dashboard

or

  • load the sub page
  • in the subpage place the spinner and the command to load the dashboard.

you can do the last one pretty easy, just by creating a html page and then navigate to that.
but you need to create a new html page for every dashboard that you want to navigate to…

10

Something for me to think about :slight_smile:

Thanks for the input.

11

your welcome.

and there is no harm to try if you like it.
you already have the complete spinner code
and loading a next page is just a line in the head from the html.
so its a pretty simple page.

and you can save it in conf/custom_css/html and navigate to it with

http://yourIP:port/custom_css/html/preloadpage.html

1 Like