Loading Icon on Charts in Mashup?

[TKendrick20]

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!

[TKendrick20]

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.

[ErikWetterberg · Accepted solution]

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

[TKendrick20]

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.

[simondachstr]

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

[TKendrick20]

They are KPI objects so they are just small metrics, but it's the extension that's holding us back.

[pnowicki]

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. 

[pnowicki]

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>

[TKendrick20]

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)----|

[ErikWetterberg]

Looks like you have a problem with your extension. Does it load a lot of files? Try to keep it to as few files as possibly, ideally only one js file + possibly a CSS file.

Erik