Custom visualization takes a long time to render despite all DOM content downloading in ~2 seconds

[zoe1]

Hi!

I’m building a custom visualization and I’m wondering why it takes so long for the tile view to show up if the content of the graph was downloaded into the DOM pretty quickly? 
Is this a Looker issue -- there’s nearly  a minute of loading time and I’m not sure what for...?

[zoe1]

I should note that this is in a dashboard; in explores and looks, the graph loads in ~1-2 seconds.

[zoe1]

Hmmm I think the custom visualization loading image is broken -- it doesn’t seem to know when to finish running so it likely default times out at 60 seconds. But if I hide that element in the console prior to 60 seconds is up, the graph is just sitting underneath the loading div. 

I have wrapped the updateAsync done argument like this: `if(details.print){done()};` . Maybe this is the issue...

[zoe1]

It is not `if(details.print){done())`. Can the Looker team please advise?

[rodricksnyc]

Is there an answer to this question? I have the same thing happening. The custom visual in Explore loads in a second but when it's saved to a dashboard, the dashboard takes 2 minutes to load...

[az-invaio]

I'm looking back at this thread, but not seeing any answers. @ZO  or @rodricksnyc  were you all able to get around this issue? It's been plaguing our dashboards for a while now. 

It looks like they have added done() or doneRendering() as part of the blueprint for a custom visualization. Maybe that is part of addressing this issue? Any help would be greatly appreciated!

[rodricksnyc]

Yes. it was missing done() after the react component. I had done={done} as a prop originally (shown below) but it was missing the done() after element:

updateAsync: function (data, element, config, queryResponse, details, done) {this.trigger("registerOptions", options);

ReactDOM.render(

<CustomTable
data={data}
config={config}
queryResponse={queryResponse}
details={details}
done={done}
/>
,
element
);

done()
}