How can I generate content in DataviewJS without making the screen jump?

[nazgul]

I have a complex DataviewJS query which looks at the page for my current meeting (which has links to the attendees) and generates a list of tasks which appear:

• On the meeting page
• On the contact page of an attendee
• Or have the first or last name of the attendee in them

When it's done it spits out an optional header, and a set of tasks grouped by contact.

This works well, but it bounces a lot, because it's constantly updating and even if there are no updates, it shrinks and then grows the page as it's executing.

    if (header) {
        dv.span(header);
    }
    Object.keys(tasks).forEach((path) => {
        dv.el("b", path2link[path]);
        dv.taskList(tasks[path], false);
    })

I tried using the new Markdown generators, but it doesn't make a difference (and weird things happen with inter-line spacing). What I suspect I really need is to make sure that nothing is rendered until everything is done. And/or something like React, where nothing happens if nothing has changed.

Is there a way for me to make this work? I'd even be willing to cache the previous result and compare them before rendering, if there was a way to say "abort this render and use the previous cached value".

[blacksmithgu]

The correct solution is React / virtual DOM diffing, though the fix has to be in Dataview itself to support react-style rendering to a virtual DOM (or by making your own plugin which calls dataview and renders results via Dataview's react components).

[blacksmithgu]

An interim solution could possibly to support persistent rendering, where scripts can opt-into not having the render view cleared and manage it manually themselves; however, it would be hard to expose the react apis to the scripts for them to use since import is not really well defined in an eval'd script.