Read the statement by Michael Teeuw here.
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
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login