Loading Image

[velkymx]

Add the loading image from the VueTables in the request page. It spins too!

[JCook21]

Note: this should be displayed when loading a process from an XML file as well as when undo/redo is clicked. We may need to add some sort of timeout to display the spinner after as well since if the process loads quickly and we try to present the spinner immediately this may make the behaviour 'twitchy'.

[chipit24]

After the paper is unfrozen, it starts rending all its nodes, but the entire viewport becomes blocked when this happens and so it's not possible to display a loader during this time, and if a loader is displayed before parsing, it will become blocked and appear frozen during render anyway.

So it appears this isn't as easy as we thought; we'll have to work on ways to reduce the render time so that a loader isn't required, or find a way to allow rendering without blocking the entire viewport.

[JCook21]

Is there any way we could get around this by displaying a static modal or anything like that?

[chipit24]

Rendering seems to completely block the main thread, preventing any interaction or updating of the viewport until it's done. We can display static content before parsing, sure, but the page will be frozen just the same.

There's a couple things I tried, to see if rendering would be improved, but these didn't help:

• Adding all nodes at once through the store (store.nodes = nodes) as opposed to one-by-one.
• Adding all shapes in bulk, using graph.addCells; though this was equivalent to using freeze/unfreeze.

I'll have to investigate if there's a way to handle rendering of the process off-screen or in the background, freeing up the main thread to render a loader. Libraries like Vue and React have already solved this problem, though JointJS is, of course, not rendering through Vue, but using its own mechanisms.

This seems like a larger task that may take another 1-2 days and we should re-prioritize it.

[JCook21]

@chipit24 is the majority of the time taken while the paper is frozen or after it is unfrozen and the chart is rendering? If the former could we display the modal just before freezing the paper and remove it when the paper unfreezes?

[chipit24]

The majority of the time is taken after the paper is unfrozen and the chart is rendering.

[chipit24]

Suggestion from @velkymx: We can simply try setting a loading cursor.

[chipit24]

It appears this isn't as straight-forward as I thought either:

• I have to set a timeout for the code which sets the cursor, otherwise the page freezes before the code seems to have any effect.
• The cursor, even if set before the "big freeze", will reset to the default cursor if you move the mouse out of the viewport.

[chipit24]

So we're back to square one: Either increasing performance so a loader isn't required, or somehow rendering the SVGs without blocking the main thread.

[JCook21]

@chipit24 is it worth changing the cursor type, even knowing that the cursor will be reset if it's moved out of the viewport? At least that way we'll have something and we can further iterate on this later.