Optimize area apps take 3

packages/apostrophe/modules/@apostrophecms/area/ui/apos/apps/AposAreas.js

@@ -27,9 +27,9 @@ export default function() {
     createAreaAppsAndRunPlayersIfDone();
   });
 
-  function createAreaAppsAndRunPlayersIfDone({ edit = true } = {}) {
+  function createAreaAppsAndRunPlayersIfDone({ edit = true, el = null } = {}) {
     if (edit) {
-      createAreaApps();
+      createAreaApps(el);
       nextTick(() => {
         cleanupOrphanedApps();
       });
@@ -39,23 +39,14 @@ export default function() {
     }
   }
 
-  function createAreaApps() {
-    // Sort the areas by DOM depth to ensure parents light up before children
-    const els = Array.from(document.querySelectorAll('[data-apos-area-newly-editable]'));
-    els.sort((a, b) => {
-      const da = depth(a);
-      const db = depth(b);
-      if (da < db) {
-        return -1;
-      } else if (db > da) {
-        return 1;
-      } else {
-        return 0;
-      }
-    });
-    for (const el of els) {
-      createAreaApp(el);
-    }
+  function createAreaApps(el) {
+    // Create apps only for the areas at the top of the nesting
+    // hierarchy in the given context. widget-rendered events will
+    // cause more invocations later, avoiding double invocations,
+    // orphaned apps and wasted time. -Tom
+    const els = Array.from((el || document).querySelectorAll('[data-apos-area-newly-editable]'));
+    const lowest = Math.min(...els.map(el => depth(el)));
+    els.filter(el => depth(el) === lowest).forEach(el => createAreaApp(el));
   }
 
   function depth(el) {
@@ -107,6 +98,9 @@ export default function() {
     }
     el.removeAttribute('data-apos-area-newly-editable');
 
+    let created = false;
+    let observer;
+
     if (apos.area.activeEditor && (apos.area.activeEditor.id === data._id)) {
       // Editing a piece causes a refresh of the main content area,
       // but this may contain the area we originally intended to add
@@ -116,6 +110,20 @@ export default function() {
 
       el.parentNode.replaceChild(apos.area.activeEditor.$el, el);
     } else {
+      observer = new IntersectionObserver(observed, {
+        rootMargin: '600px'
+      });
+      observer.observe(el);
+    }
+
+    function observed(entries) {
+      const intersects = entries[0].isIntersecting;
+      if (!intersects) {
+        return;
+      }
+      if (created) {
+        return;
+      }
       const app = createApp(component, {
         options,
         id: data._id,
@@ -127,9 +135,10 @@ export default function() {
         parentOptions,
         renderings
       });
-
       app.mount(el);
       mountedApps.set(el, app);
+      created = true;
+      observer.disconnect();
     }
   }
 

packages/apostrophe/modules/@apostrophecms/widget-type/ui/apos/composables/AposWidget.js

@@ -20,14 +20,14 @@ export function useAposWidget(props) {
     })
   };
 
-  async function renderContent() {
+  async function renderContent(el) {
     const result = await _renderContent(props);
     if (Object.hasOwn(result, 'data')) {
       rendered.value = result.data;
     }
     if (!result.error) {
       nextTick(() => {
-        _emitWidgetRendered(props.modelValue.aposLivePreview);
+        _emitWidgetRendered(props.modelValue.aposLivePreview, { el });
       });
     }
   }
@@ -99,6 +99,9 @@ export async function _renderContent(props) {
 // Wait for reactivity to render v-html so that markup is
 // in the DOM before hinting that it might be time to prepare
 // sub-area editors and run players (done in mixin and composable)
-export function _emitWidgetRendered(aposLivePreview) {
-  apos.bus.$emit('widget-rendered', { edit: !aposLivePreview });
+export function _emitWidgetRendered(aposLivePreview, options = {}) {
+  apos.bus.$emit('widget-rendered', {
+    edit: !aposLivePreview,
+    ...options
+  });
 }

packages/apostrophe/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js

@@ -38,7 +38,7 @@ export default {
       }
       if (!result.error) {
         this.$nextTick(() => {
-          _emitWidgetRendered(this.modelValue.aposLivePreview);
+          _emitWidgetRendered(this.modelValue.aposLivePreview, { el: this.$el });
         });
       }
     }