feat(core): lazy load popover body (#12955)

* feat: lazy load popover body in overflow layout component * feat: lazy load popover body in avatar group component --------- Co-authored-by: Mike O'Donnell <mikerodonnell89@users.noreply.github.com>
SAP · Feb 5, 2025 · db11bc2 · db11bc2
1 parent 0d14958
commit db11bc2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/libs/core/avatar-group/avatar-group.component.html b/libs/core/avatar-group/avatar-group.component.html
@@ -26,9 +26,9 @@
                     </ng-template>
                 </fd-popover-control>
                 @if (item.details) {
-                    <fd-popover-body>
+                    <ng-template fdPopoverBody>
                         <ng-template [ngTemplateOutlet]="item.details"></ng-template>
-                    </fd-popover-body>
+                    </ng-template>
                 }
             </fd-popover>
         }

diff --git a/libs/core/overflow-layout/overflow-layout.component.html b/libs/core/overflow-layout/overflow-layout.component.html
@@ -47,7 +47,7 @@
                         {{ 'coreOverflowLayout.moreItemsButton' | fdTranslate: { count: _hiddenItems.length } }}
                     </button>
                 </fd-popover-control>
-                <fd-popover-body>
+                <ng-template fdPopoverBody>
                     <div fdOverflowLayoutPopoverContent [items]="_hiddenItems">
                         @for (item of _hiddenItems; track item) {
                             <ng-template
@@ -63,7 +63,7 @@
                             ></ng-template>
                         }
                     </div>
-                </fd-popover-body>
+                </ng-template>
             </fd-popover>
         </ng-template>
         <ng-template

diff --git a/libs/core/overflow-layout/overflow-layout.component.ts b/libs/core/overflow-layout/overflow-layout.component.ts
@@ -25,7 +25,7 @@ import {
 } from '@angular/core';
 import { KeyUtil, Nullable, RtlService } from '@fundamental-ngx/cdk/utils';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
-import { PopoverBodyComponent, PopoverComponent, PopoverControlComponent } from '@fundamental-ngx/core/popover';
+import { PopoverBodyDirective, PopoverComponent, PopoverControlComponent } from '@fundamental-ngx/core/popover';
 import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { Subject, Subscription, debounceTime, filter, first, fromEvent, startWith } from 'rxjs';
 import { OverflowItemContainerRefDirective } from './directives/overflow-item-container-ref.directive';
@@ -63,7 +63,7 @@ import { FD_OVERFLOW_ITEM_REF } from './tokens/overflow-item-ref.token';
         PopoverComponent,
         PopoverControlComponent,
         ButtonComponent,
-        PopoverBodyComponent,
+        PopoverBodyDirective,
         OverflowLayoutPopoverContentDirective,
         FdTranslatePipe
     ]