Proper way to have module loading screen
-
I have a module that takes time to load and update the dom, so there is a delay. I want to add a loading notification somehow to my mirror so I know the command was submitted. I tried to add a loading div to the dom wrapper, but got nowhere. Does anyone have a good example of this?
-
@isaac2004 everybody does this.
Add text element to your getDom() by default, and replace w good content when it’s ready
-
@sdetweil how do you check it is ready? Is there a property to check?
-
@isaac2004 that is up to the module design. You get new data from somewhere. Your node helper, or some http request. Once u have that new data, you call this.updateDom() to tell mm that u have new content, and it calls getDom() to get the new html.
In getDom() you check YOUR state to determine which html to generate.
-
@sdetweil eh playing more with this, I might have a limitation. I am using the Google Maps Api to load a map of a place I provide via voice. All is working fine, but there is delay in loading all the tiles. I have setup opacity and all that, but I would like to add a loading message that notifies of a command being input. The issue with updating the dom is that the event listener that I use to show the map once the tiles loaded needs the dom, so I cannot have a basically empty dom. What I really need is to be able to have 2 divs in my module, one that is the map, the other that is the loading div and hide/show accordingly. I tried that, the dom gets updated, but the UI does not change. Any thoughts?
-
@isaac2004 this is probably a side effect of the updateDom/getDom cycle.
are you doing the changes directly to the dom when the map has loaded?
or using updateDom() to signal? if using updateDom() to signal, there is a timing bug,
make sure to have some delay value, like updateDom(10). else there is a compare race condition.
-
@sdetweil so the map loads and the tileloaded event triggers on the map object. At that time, I set the class of the div to something visible. I have not figured out a way to have multiple divs in my module container and flip visibility from that event, which is what I need to do. All this is done after updateDom() and getDom() have already fired
-
@isaac2004 said in Proper way to have module loading screen:
I have not figured out a way to have multiple divs in my module container and flip visibility from that event
what is the problem?
when u start to load the map , it is hidden and the loading div is shown.
then in your tileloaded event trigger, you would document.getElementByID(the loading div) and hide it,
then show the tile div…I hide/show two different images directly without problem and another design is to have two divs and toggle them
