2 files changed, 20 insertions, 7 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 2df053c50..85187c347 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1144,7 +1144,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
 
     isContentActive = () => this.props.isSelected() || this.props.isContentActive();
 
-    getChildDocView(entry: PoolData) {
+    getChildDocView(entry: PoolData, renderIndex: number) {
         const childLayout = entry.pair.layout;
         const childData = entry.pair.data;
         const engine = this.props.layoutEngine?.() || StrCast(this.props.Document._layoutEngine);
@@ -1153,6 +1153,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             Document={childLayout}
             renderDepth={this.props.renderDepth + 1}
             replica={entry.replica}
+            renderIndex={renderIndex}
+            renderCutoff={this.NumLoaded}
             ContainingCollectionView={this.props.CollectionView}
             ContainingCollectionDoc={this.props.Document}
             CollectionFreeFormView={this}
@@ -1300,7 +1302,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         return { newPool, computedElementData: this.doFreeformLayout(newPool) };
     }
 
-    @observable numLoaded = 0;
+    @observable _numLoaded = 0;
+    NumLoaded = () => this._numLoaded;
     get doLayoutComputation() {
         const { newPool, computedElementData } = this.doInternalLayoutComputation;
         const array = Array.from(newPool.entries());
@@ -1319,9 +1322,9 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         this._cachedPool.clear();
         Array.from(newPool.entries()).forEach(k => this._cachedPool.set(k[0], k[1]));
         const elements = computedElementData.slice();
-        Array.from(newPool.entries()).filter(entry => this.isCurrent(entry[1].pair.layout)).forEach(entry =>
+        Array.from(newPool.entries()).filter(entry => this.isCurrent(entry[1].pair.layout)).forEach((entry, i) =>
             elements.push({
-                ele: this.getChildDocView(entry[1]),
+                ele: this.getChildDocView(entry[1], i),
                 bounds: this.childDataProvider(entry[1].pair.layout, entry[1].replica)
             }));
 
@@ -1558,12 +1561,17 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         e.stopPropagation();
     }
 
+    incrementalRender = action(() => {
+        this._numLoaded++;
+        this._numLoaded < this.views.length && setTimeout(this.incrementalRender, 25);
+    })
+
     children = () => {
-        this.numLoaded < this.views.length && setTimeout(action(() => this.numLoaded += 10), 500);
+        this.incrementalRender();
         const children = typeof this.props.children === "function" ? (this.props.children as any)() as JSX.Element[] : [];
         return [
             ...children,
-            ...this.views.slice(0, Math.min(this.views.length, this.numLoaded + 10)),
+            ...this.views,
             <CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />
         ];
     }
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index d8ba88c02..460982c8a 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -28,6 +28,8 @@ export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
     jitterRotation: number;
     dataTransition?: string;
     replica: string;
+    renderCutoff: () => number;
+    renderIndex: number;
     CollectionFreeFormView: CollectionFreeFormView;
 }
 
@@ -176,7 +178,10 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 mixBlendMode,
                 display: this.ZInd === -99 ? "none" : undefined
             }} >
-            <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} />
+            {this.props.renderCutoff() >= this.props.renderIndex ?
+                <DocumentView {...divProps} ref={action((r: DocumentView | null) => this._contentView = r)} />
+                :
+                <div style={{ position: "absolute", width: this.panelWidth(), height: this.panelHeight(), background: "lightGreen" }}></div>}
         </div>;
     }
 }