Deferred layout of child groups

With FoamTree 3.4.5 and later you can control the moment when FoamTree computes the layout of child groups. You can use this mechanism to improve performance when visualizing deeply nested hierarchies with hundreds of groups on the top level.

The following demo generates a deeply-nested hierarchy with hundreds of groups on the top level. Upon initialization, only the the top level groups (without child groups) are shown. Once the layout stabilizes, the attach(group) method is called to compute the layout for individual top-level groups. To keep the browser's user interface responsive, the code initialized a limited number of top-level groups in one requestAnimationFrame() callback.

To further speed things up, the third level of the hierarchy is initialized only when the user chooses to inspect the parent group, for example by double clicking it.

What's in the code?