refactor(multiple): use write in afterRenderEffect for aria DeferredContent updates

Author: adolgachev

src/aria/accordion/accordion-panel.ts

@@ -72,8 +72,10 @@ export class AccordionPanel {
 
   constructor() {
     // Connect the panel's hidden state to the DeferredContentAware's visibility.
-    afterRenderEffect(() => {
-      this._deferredContentAware.contentVisible.set(this.visible());
+    afterRenderEffect({
+      write: () => {
+        this._deferredContentAware.contentVisible.set(this.visible());
+      },
     });
   }
 

src/aria/combobox/combobox.ts

@@ -140,13 +140,15 @@ export class Combobox<V> {
       }
     });
 
-    afterRenderEffect(() => {
-      if (
-        !this._deferredContentAware?.contentVisible() &&
-        (this._pattern.isFocused() || this.alwaysExpanded())
-      ) {
-        this._deferredContentAware?.contentVisible.set(true);
-      }
+    afterRenderEffect({
+      write: () => {
+        if (
+          !this._deferredContentAware?.contentVisible() &&
+          (this._pattern.isFocused() || this.alwaysExpanded())
+        ) {
+          this._deferredContentAware?.contentVisible.set(true);
+        }
+      },
     });
   }
 

src/aria/menu/menu.ts

@@ -162,15 +162,17 @@ export class Menu<V> {
       itemSelected: (value: V) => this.itemSelected.emit(value),
     });
 
-    afterRenderEffect(() => {
-      const parent = this.parent();
-      if (parent instanceof MenuItem && parent.parent instanceof MenuBar) {
-        this._deferredContentAware?.contentVisible.set(true);
-      } else {
-        this._deferredContentAware?.contentVisible.set(
-          this._pattern.visible() || !!this.parent()?._pattern.hasBeenInteracted(),
-        );
-      }
+    afterRenderEffect({
+      write: () => {
+        const parent = this.parent();
+        if (parent instanceof MenuItem && parent.parent instanceof MenuBar) {
+          this._deferredContentAware?.contentVisible.set(true);
+        } else {
+          this._deferredContentAware?.contentVisible.set(
+            this._pattern.visible() || !!this.parent()?._pattern.hasBeenInteracted(),
+          );
+        }
+      },
     });
 
     // Focuses an active menu item when the menu becomes visible. This is needed to

src/aria/private/deferred-content/deferred-content.ts

@@ -53,17 +53,19 @@ export class DeferredContent implements OnDestroy {
   readonly deferredContentAware = signal(this._deferredContentAware);
 
   constructor() {
-    afterRenderEffect(() => {
-      if (this.deferredContentAware()?.contentVisible()) {
-        if (!this._isRendered) {
+    afterRenderEffect({
+      write: () => {
+        if (this.deferredContentAware()?.contentVisible()) {
+          if (!this._isRendered) {
+            this._destroyContent();
+            this._currentViewRef = this._viewContainerRef.createEmbeddedView(this._templateRef);
+            this._isRendered = true;
+          }
+        } else if (!this.deferredContentAware()?.preserveContent()) {
           this._destroyContent();
-          this._currentViewRef = this._viewContainerRef.createEmbeddedView(this._templateRef);
-          this._isRendered = true;
+          this._isRendered = false;
         }
-      } else if (!this.deferredContentAware()?.preserveContent()) {
-        this._destroyContent();
-        this._isRendered = false;
-      }
+      },
     });
   }
 

src/aria/tabs/tab-panel.ts

@@ -90,7 +90,11 @@ export class TabPanel implements OnInit, OnDestroy {
   });
 
   constructor() {
-    afterRenderEffect(() => this._deferredContentAware.contentVisible.set(this.visible()));
+    afterRenderEffect({
+      write: () => {
+        this._deferredContentAware.contentVisible.set(this.visible());
+      },
+    });
   }
 
   ngOnInit() {

src/aria/tree/tree-item.ts

@@ -128,10 +128,12 @@ export class TreeItem<V> extends DeferredContentAware implements OnInit, OnDestr
       }
     });
     // Connect the group's hidden state to the DeferredContentAware's visibility.
-    afterRenderEffect(() => {
-      this.tree()._pattern instanceof ComboboxTreePattern
-        ? this.contentVisible.set(true)
-        : this.contentVisible.set(this._pattern.expanded());
+    afterRenderEffect({
+      write: () => {
+        this.tree()._pattern instanceof ComboboxTreePattern
+          ? this.contentVisible.set(true)
+          : this.contentVisible.set(this._pattern.expanded());
+      },
     });
   }