Loading state

[otaviobonder-deel]

First of all, great lib. Second awesome lib I'm using from you, thank you!

I'm using the warmupTicks={50} because I'm loading a big dataset. Everything is working, with minor performance issues moving the graph. While the graph is loading (after data is ready) it shows a blank screen. Is it possible to add a loader while the graph is warming up?

Thanks!

[vasturiano]

@otaviobps thanks for reaching out. Glad the lib is working out well for you.

For this loading purpose, I would suggest using the onEngineTick event handler to detect when the loading is done, and just overlay a loading indicator before that. The warmup section of the graph does not trigger onEngineTick events.

[timtutt]

Hi @vasturiano - huge fan as well of the library. Do you have an example of onEngineTick and the parameters? I wasn't able to find one and was having a similar issue.

[vasturiano]

@timtutt that prop is simply an event function that gets called at every tick of the engine. It doesn't receive any arguments. So you'd use it something like this:

onEngineTick={() => /* your logic here */}

[timtutt]

Thanks much fo the response here. I think the piece I was missing here is that I should be looking for the first occurrence of onEngineTick to change the state?

[vasturiano]

@timtutt if you're trying to determine if it's the first time that method is invoked, you can just keep state in your app that tracks it. Probably as simple as:

const [hasLoaded, setHasLoaded] = useState(false);
(...)
onEngineTick={() => setHasLoaded(true)}