MagicMirror² v2.8.0 is available! For more information about this release, check out this topic.

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