feat(tabs): #16806 add lazy loading for tabpanel content

primefaces · Jan 14, 2025 · 96e1111 · 96e1111
1 parent d6332d0
commit 96e1111
Show file tree

Hide file tree

Showing 5 changed files with 145 additions and 15 deletions.
diff --git a/apps/showcase/doc/tabs/lazydoc.ts b/apps/showcase/doc/tabs/lazydoc.ts
@@ -0,0 +1,107 @@
+import { Code } from '@/domain/code';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'lazy-doc',
+    standalone: false,
+    template: `
+        <app-docsectiontext>
+            <p>
+                By default, projected content in <i>TabPanel</i> component is initialized, even if tab is not active. You can get around this rule by encapsulating the projected content in an <i>ng-template</i>. Lazy content will not be initialized
+                again upon reselection.
+            </p>
+        </app-docsectiontext>
+        <div class="card">
+            <p-tabs value="0">
+                <p-tablist>
+                    <p-tab value="0">Header I</p-tab>
+                    <p-tab value="1">Header II</p-tab>
+                    <p-tab value="2">Header III</p-tab>
+                </p-tablist>
+                <p-tabpanels>
+                    <p-tabpanel value="0">
+                        <p class="m-0">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+                            laborum.
+                        </p>
+                    </p-tabpanel>
+                    <p-tabpanel value="1">
+                        <ng-template>Complex content to lazy load</ng-template>
+                    </p-tabpanel>
+                    <p-tabpanel value="2">
+                        <ng-template>Complex content to lazy load</ng-template>
+                    </p-tabpanel>
+                </p-tabpanels>
+            </p-tabs>
+        </div>
+        <app-code [code]="code" selector="tabs-lazy-demo"></app-code>
+    `
+})
+export class LazyDoc {
+    code: Code = {
+        basic: `<p-tabs value="0">
+    <p-tablist>
+        <p-tab value="0">Header I</p-tab>
+        <p-tab value="1">Header II</p-tab>
+        <p-tab value="2">Header III</p-tab>
+    </p-tablist>
+    <p-tabpanels>
+        <p-tabpanel value="0">
+            <p class="m-0">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+                ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+                anim id est laborum.
+            </p>
+        </p-tabpanel>
+       <p-tabpanel value="1">
+            <ng-template>Complex content to lazy load</ng-template>
+        </p-tabpanel>
+        <p-tabpanel value="2">
+              <ng-template>Complex content to lazy load</ng-template>
+        </p-tabpanel>
+    </p-tabpanels>
+</p-tabs>`,
+
+        html: `<div class="card">
+    <p-tabs value="0">
+        <p-tablist>
+            <p-tab value="0">Header I</p-tab>
+            <p-tab value="1">Header II</p-tab>
+            <p-tab value="2">Header III</p-tab>
+        </p-tablist>
+        <p-tabpanels>
+            <p-tabpanel value="0">
+                <p class="m-0">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+                    anim id est laborum.
+                </p>
+            </p-tabpanel>
+            <p-tabpanel value="1">
+                <ng-template>Complex content to lazy load</ng-template>
+            </p-tabpanel>
+            <p-tabpanel value="2">
+                <ng-template>Complex content to lazy load</ng-template>
+            </p-tabpanel>
+        </p-tabpanels>
+    </p-tabs>
+</div>`,
+
+        typescript: `import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TabsModule } from 'primeng/tabs';
+
+@Component({
+    selector: 'tabs-lazy-demo',
+    templateUrl: './tabs-lazy-demo.html',
+    standalone: true,
+    imports: [CommonModule, TabsModule]
+})
+export class TabsLazyDemo {}`
+    };
+}
diff --git a/apps/showcase/doc/tabs/tabsdoc.module.ts b/apps/showcase/doc/tabs/tabsdoc.module.ts
@@ -14,12 +14,13 @@ import { TemplateDoc } from './customtemplatedoc';
 import { DisabledDoc } from './disableddoc';
 import { DynamicDoc } from './dynamicdoc';
 import { ImportDoc } from './importdoc';
+import { LazyDoc } from './lazydoc';
 import { ScrollableDoc } from './scrollabledoc';
 import { TabmenuDoc } from './tabmenudoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, TabsModule, RouterModule, ButtonModule, AvatarModule, BadgeModule],
     exports: [AppDocModule],
-    declarations: [ImportDoc, BasicDoc, ControlledDoc, DynamicDoc, DisabledDoc, TemplateDoc, ScrollableDoc, TabmenuDoc, AccessibilityDoc]
+    declarations: [ImportDoc, BasicDoc, LazyDoc, ControlledDoc, DynamicDoc, DisabledDoc, TemplateDoc, ScrollableDoc, TabmenuDoc, AccessibilityDoc]
 })
 export class TabsDocModule {}
diff --git a/apps/showcase/pages/tabs/index.ts b/apps/showcase/pages/tabs/index.ts
@@ -5,6 +5,7 @@ import { TemplateDoc } from '@/doc/tabs/customtemplatedoc';
 import { DisabledDoc } from '@/doc/tabs/disableddoc';
 import { DynamicDoc } from '@/doc/tabs/dynamicdoc';
 import { ImportDoc } from '@/doc/tabs/importdoc';
+import { LazyDoc } from '@/doc/tabs/lazydoc';
 import { ScrollableDoc } from '@/doc/tabs/scrollabledoc';
 import { TabmenuDoc } from '@/doc/tabs/tabmenudoc';
 import { TabsDocModule } from '@/doc/tabs/tabsdoc.module';
@@ -42,6 +43,11 @@ export class TabsDemo {
             label: 'Scrollable',
             component: ScrollableDoc
         },
+        {
+            id: 'lazy',
+            label: 'Lazy',
+            component: LazyDoc
+        },
         {
             id: 'disabled',
             label: 'Disabled',

diff --git a/packages/primeng/src/tabs/tabpanel.ts b/packages/primeng/src/tabs/tabpanel.ts
@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, forwardRef, inject, model, ViewEncapsulation } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, contentChild, forwardRef, inject, model, TemplateRef, ViewEncapsulation } from '@angular/core';
 import { equals } from '@primeuix/utils';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Tabs } from './tabs';
@@ -11,10 +11,15 @@ import { Tabs } from './tabs';
 @Component({
     selector: 'p-tabpanel',
     standalone: true,
-    imports: [CommonModule],
-    template: `@if (active()) {
-        <ng-content></ng-content>
-    }`,
+    imports: [NgTemplateOutlet],
+    template: `
+        @if (initialized()) {
+            <ng-container *ngTemplateOutlet="lazyContent() ? lazyContent() : staticContent"></ng-container>
+            <ng-template #staticContent>
+                <ng-content />
+            </ng-template>
+        }
+    `,
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     host: {
@@ -24,7 +29,8 @@ import { Tabs } from './tabs';
         '[attr.id]': 'id()',
         '[attr.role]': '"tabpanel"',
         '[attr.aria-labelledby]': 'ariaLabelledby()',
-        '[attr.data-p-active]': 'active()'
+        '[attr.data-p-active]': 'active()',
+        '[hidden]': '!active()'
     }
 })
 export class TabPanel extends BaseComponent {
@@ -36,9 +42,26 @@ export class TabPanel extends BaseComponent {
      */
     value = model<string | number | undefined>(undefined);
 
+    lazyContent = contentChild(TemplateRef);
+
     id = computed(() => `${this.pcTabs.id()}_tabpanel_${this.value()}`);
 
     ariaLabelledby = computed(() => `${this.pcTabs.id()}_tab_${this.value()}`);
 
     active = computed(() => equals(this.pcTabs.value(), this.value()));
+
+    private _initialized = false;
+
+    initialized = computed(() => {
+        if (this._initialized) {
+            return true;
+        }
+
+        if (!this.active()) {
+            return false;
+        }
+
+        this._initialized = true;
+        return true;
+    });
 }
diff --git a/packages/primeng/src/tabs/tabs.ts b/packages/primeng/src/tabs/tabs.ts
@@ -43,13 +43,6 @@ export class Tabs extends BaseComponent {
      * @group Props
      */
     scrollable = input(false, { transform: booleanAttribute });
-    /**
-     * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
-     * @type boolean
-     * @defaultValue false
-     * @group Props
-     */
-    lazy = input(false, { transform: booleanAttribute });
     /**
      * When enabled, the focused tab is activated.
      * @type boolean