9 Replies Latest reply: Sep 16, 2016 7:32 AM by Erik Wetterberg RSS

    Loading Icon on Charts in Mashup?

    Tim Kendrick

      Is it possible to put a loading icon for the qvObjects in a Qlik Sense mashup while waiting for them to load?

       

      Currently, we have about 10 qvObjects that need to load for a mashup webpage. The objects all remain blank until the chart pops up (after 5-10 seconds sometimes). This might confuse the user, so I need a way of telling them that a chart is being processed.

       

      Thanks!

        • Re: Loading Icon on Charts in Mashup?
          Tim Kendrick

          We have realized that qvObjects have loading spinners built in, but only show if they object is going to take a REALLY long time to load (like more than 10 seconds). We are looking in to making this time shorter so they start spinning right after the rest of the non-qvObjects have been fully loaded.

          • Re: Loading Icon on Charts in Mashup?
            Erik Wetterberg

            Hi Tim,

            Have you tried investigating why it is so slow?? Is it openDoc that takes time or the actual charts? Try to avoid loading objects that are not actually visible at startup, and don't load objects until they are visible.

             

            I haven't tried this, but I think that if you put some content in the HTML elements where you show the qvObjects, it might show until the qvObject is loaded.

             

            Hope this helps

             

            Erik

              • Re: Loading Icon on Charts in Mashup?
                Tim Kendrick

                I just took a look at the network waterfall for our mashup. It looks like a bulk of the wait time is actually Qlik Sense getting the style sheets and JavaScript files associated with our mashup and a couple of the custom extensions that we are using. This can be remedied potentially by consolidating our css sheets and just upgrading the resources to the VM that is hosting our Qlik Sense Server.

                 

                I will certainly have to look into not loading charts until they are visible, too.

                • Re: Loading Icon on Charts in Mashup?
                  Paul Nowicki

                  I can confirm that Erik's suggestion works for adding loading icons.  In the code snippet below you can see how I include the text "Loading..." and then an animated loading icon "default.gif". After the object loads, the text and icon and replaced and no longer visible.  So, pretty easy fix to what is in my opinion a necessary step (best practice) for all mashups.  Especially given that the built in loading times for require.js, qlik-styles.css, and the app.js can take 3-4 seconds to initialize the content. 

                   

                   

                  <div class="chart-container">

                    <div id="QV1-18"  class="xlchart qvobject"><p>Loading...</p><img src="/resources/assets/external/default.gif"></div>

                    </div>

                    • Re: Loading Icon on Charts in Mashup?
                      Tim Kendrick

                      Yeah this works for all intents and purposes. I'm not going to add any images but I did add "Loading..." and it looks okay. However, it does not persist all the way until the chart is shown. It kinda goes like this:

                       

                      |------"Loading..." 60% ------|------Blank Object 40%-----|-----Built-in spinner (if taking a long time)----|

                  • Re: Loading Icon on Charts in Mashup?
                    Martin Mahler

                    Don't have 10 objects displayed at the same time - users only have two eyes. 5-10 seconds waiting time is not acceptable.

                    • Re: Loading Icon on Charts in Mashup?
                      Paul Nowicki

                      I think I'll need to add loading icons to my mashup as well.  I load very few objects per page (only 2 on initial load) and the mashup can take up to 5-10 seconds to load depending on a few variables. Removing extensions helps, but also disappointing because extensions fill the void for missing functionality in Qlik Sense.  I've also had to eliminate some functionality where I found the chart to take too much time to load or if it slows down at all during use.  I also employ a dynamic load and destroy on objects so when they are not being used they are eliminated from memory. Even after all of that I still think mashups are too slow. Once the user experience gets bogged down, people disengage.  I'm still working on improving end user performance and plan on continuing to try and tweak the mashup and will experiment with better hardware for the Qlik Sense server.  Either way, I'm looking at adding the loading icons to the objects just in case.