FEATURE: Only load content tree nodes on demand

[Sebobo]

Resolves: #2926

What I did

The content tree now behaves the same as the document tree. Only loading the nodes defined by loadingDepth initially and not relying purely on the nodedata rendered in the guestframe.
Toggling nodes with children also mimimcs the behaviour of the document tree and reloads the children when needed.

That reduces the number of initial db requests during page rendering in the backend from 119 to 78 in my test.

For large number of content nodes on a page this should improve performance considerably, especially if they are not all rendered.

How I did it

• Removed the nonRenderedNodes rendering in the Neos.Neos:Page prototype
• Adapt toggle/loading/updating mechanics from document tree to content tree
• Load all necessary nodes defined by loadingDepth when reloading or switching documents and merge them with data from content (might make loading on toggle in some cases unnecessary later)

How to verify it

Work with content tree like before

Example video shows page with content that is not rendered, uncollapsing the parent node then loads the nodes (see loading spinner).
The other page renders all content, no further nodes need to be loaded.

Content.tree.node.loader.mov

[Sebobo]

Failing tests in master seems unrelated as it also fails for the other open PRs.

[grebaldi]

Tests are green again :)

[grebaldi]

Hi @Sebobo,

I've encountered an issue, though I have not identified a root cause yet.

So, I have a Content NodeType that has two auto-created content collections:

'Vendor.Site:Content.Section':
  superTypes:
    'Vendor.Site:Content': true
// ...
  childNodes:
    contents:
      type: Neos.Neos:ContentCollection
      constraints:
        nodeTypes:
          'Vendor.Site:Content': true
    hidden-contents:
      type: Neos.Neos:ContentCollection
      constraints:
        nodeTypes:
          'Vendor.Site:Content': true

The collection contents is being rendered with content element wrapping, while hidden-contents is not being rendered at all.

This leads to this behavior:

Before	After
	https://user-images.githubusercontent.com/2522299/126901010-2d21160f-4c60-4113-842f-12c68083126a.mp4

I'll continue to investigate, but maybe you have an immediate idea what might be causing this :)

[Sebobo]

Hi @grebaldi thanks for testing.

Your example was one of the first issues I encountered after turning off the unrendered nodes rendering and had fixed. And with your nodetype definition and the following Fusion I'm not able to reproduce:

prototype(Vendor.Site:Content.Section) < prototype(Neos.Neos:ContentComponent) {
    renderer = afx`
        <div>
            <Neos.Neos:ContentCollection nodePath="contents" />
        </div>
    `
}

See in my video how it has part of the tree initially retrieved from the content and then it automatically loads the missing second collection:

two-child-collections.mov

So maybe anything special in your Fusion, that I did differently?

And can you check if the initial event for watchCurrentDocument is triggered for the content tree and executes a flowquery?

[Sebobo]

Fixed two bugs related to selecting content nodes that are not on the current page.

@grebaldi did you have another chance to verify your issue?
Maybe we should have a call and look at it together.

[markusguenther]

Tested the PR and did not see any issues like @grebaldi
So can not reproduce it. But maybe Wilhelm can check it again :)

The PR looks pretty clean. The change works like a charm on my machine ;)
Thanks to @Sebobo for this improvement 💚

[grebaldi]

I still saw the issue and debugged a bit.

I could assert that the initial check for childrenAreFullyLoaded in the watchCurrentDocument saga wasn't performed recursively - that was the cause for the issue I've seen.

I added a suggestion that should fix it :)

[Sebobo]

@grebaldi thx!

Can't see a difference, but makes sense :)
Commited the change.

[grebaldi]

Hi @Sebobo,

I added another suggestion that should fix those eslint complaints that were introduced by my other suggestion. Sorry for that 😅