diff --git a/src/app/components/megamenu/megamenu.ts b/src/app/components/megamenu/megamenu.ts
index dac34266237..9e8f5b92e2a 100755
--- a/src/app/components/megamenu/megamenu.ts
+++ b/src/app/components/megamenu/megamenu.ts
@@ -614,7 +614,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
             this.focusedItemInfo.set({ index, key, parentKey, item });
 
             this.dirty = !root;
-            DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+            DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
         } else {
             if (grouped) {
                 this.onItemChange(event);
@@ -623,7 +623,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
                 this.hide(originalEvent);
                 this.changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
 
-                DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+                DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
             }
         }
     }
@@ -636,7 +636,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
 
     scrollInView(index: number = -1) {
         const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
-        const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${id}"]`);
+        const element = DomHandler.findSingle(this.rootmenu?.el.nativeElement, `li[id="${id}"]`);
 
         if (element) {
             element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
@@ -657,14 +657,14 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
         this.focusedItemInfo.set({ index, key, parentKey, item });
 
         grouped && (this.dirty = true);
-        isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+        isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
     }
 
     hide(event?, isFocus?: boolean) {
         this.activeItem.set(null);
         this.focusedItemInfo.set({ index: -1, key: '', parentKey: '', item: null });
 
-        isFocus && DomHandler.focus(this.rootmenu.menubarViewChild.nativeElement);
+        isFocus && DomHandler.focus(this.rootmenu?.menubarViewChild?.nativeElement);
         this.dirty = false;
     }
 
@@ -991,7 +991,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
 
     onEnterKey(event: KeyboardEvent) {
         if (this.focusedItemInfo().index !== -1) {
-            const element = DomHandler.findSingle(this.rootmenu.el.nativeElement, `li[id="${`${this.focusedItemId}`}"]`);
+            const element = DomHandler.findSingle(this.rootmenu?.el?.nativeElement, `li[id="${`${this.focusedItemId}`}"]`);
             const anchorElement = element && DomHandler.findSingle(element, 'a[data-pc-section="action"]');
 
             anchorElement ? anchorElement.click() : element && element.click();
@@ -1044,7 +1044,7 @@ export class MegaMenu implements AfterContentInit, OnDestroy, OnInit {
         if (isPlatformBrowser(this.platformId)) {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = this.renderer.listen(this.document, 'click', (event) => {
-                    const isOutsideContainer = this.rootmenu.el.nativeElement !== event.target && !this.rootmenu.el.nativeElement.contains(event.target);
+                    const isOutsideContainer = this.rootmenu?.el.nativeElement !== event.target && !this.rootmenu?.el.nativeElement.contains(event.target);
 
                     if (isOutsideContainer) {
                         this.hide();
diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts
index 9aed07a4b9a..b72a5e105a0 100755
--- a/src/app/components/tieredmenu/tieredmenu.ts
+++ b/src/app/components/tieredmenu/tieredmenu.ts
@@ -176,6 +176,7 @@ import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
                         [menuId]="menuId"
                         [activeItemPath]="activeItemPath"
                         [focusedItemId]="focusedItemId"
+                        [ariaLabelledBy]="getItemId(processedItem)"
                         [level]="level + 1"
                         (itemClick)="itemClick.emit($event)"
                         (itemMouseEnter)="onItemMouseEnter($event)"
diff --git a/src/app/components/tree/tree.ts b/src/app/components/tree/tree.ts
index 26571a10d2a..86a4c935932 100755
--- a/src/app/components/tree/tree.ts
+++ b/src/app/components/tree/tree.ts
@@ -120,7 +120,7 @@ import {
                         </span>
                     </span>
                 </div>
-                <ul class="p-treenode-children" style="display: none;" *ngIf="!tree.virtualScroll && node.children && node.expanded" [style.display]="node.expanded ? 'block' : 'none'" role="group">
+                <ul class="p-treenode-children" style="display: none;" *ngIf="!tree.virtualScroll && node.children && node.expanded" [style.display]="node.expanded ? 'block' : 'none'" role="tree">
                     <p-treeNode
                         *ngFor="let childNode of node.children; let firstChild = first; let lastChild = last; let index = index; trackBy: tree.trackBy"
                         [node]="childNode"
diff --git a/src/app/showcase/demo/deferreddemo.scss b/src/app/showcase/demo/deferreddemo.scss
new file mode 100755
index 00000000000..02eb23994ea
--- /dev/null
+++ b/src/app/showcase/demo/deferreddemo.scss
@@ -0,0 +1,10 @@
+.demo-section-loading {
+    display: grid;
+    place-items: center;
+    padding: 2rem;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+    font-size: 2rem;
+    height: 350px;
+    background: var(--maskbg);
+}
\ No newline at end of file
diff --git a/src/app/showcase/demo/deferreddemo.ts b/src/app/showcase/demo/deferreddemo.ts
new file mode 100755
index 00000000000..c4f76e9fbc6
--- /dev/null
+++ b/src/app/showcase/demo/deferreddemo.ts
@@ -0,0 +1,54 @@
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output, PLATFORM_ID } from '@angular/core';
+
+@Component({
+    selector: 'p-deferred-demo',
+    standalone: true,
+    imports: [CommonModule],
+    template: `
+        @if(!visible){
+        <div class="demo-section-loading">Loading...</div>
+        } @else {
+        <ng-content></ng-content>
+        }
+    `,
+    styleUrl: './deferreddemo.scss'
+})
+export class DeferredDemo implements OnInit {
+    visible: boolean = false;
+
+    observer = null;
+
+    timeout = null;
+
+    @Input() options: any;
+
+    @Output() load: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    constructor(public el: ElementRef, @Inject(PLATFORM_ID) private platformId: any) {}
+
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.observer = new IntersectionObserver(([entry]) => {
+                clearTimeout(this.timeout);
+
+                if (entry.isIntersecting) {
+                    this.timeout = setTimeout(() => {
+                        this.visible = true;
+                        this.observer.unobserve(this.el.nativeElement);
+                        this.load.emit();
+                    }, 350);
+                }
+            }, this.options);
+
+            this.observer.observe(this.el.nativeElement);
+        }
+    }
+
+    ngOnDestroy() {
+        if (!this.visible && this.el.nativeElement) {
+            this.observer?.unobserve(this.el.nativeElement);
+        }
+        clearTimeout(this.timeout);
+    }
+}
diff --git a/src/app/showcase/doc/chart/basicdoc.ts b/src/app/showcase/doc/chart/basicdoc.ts
index f2538e42387..600ce97c7b3 100644
--- a/src/app/showcase/doc/chart/basicdoc.ts
+++ b/src/app/showcase/doc/chart/basicdoc.ts
@@ -1,6 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { Code } from '../../domain/code';
+import { AppConfigService } from '../../service/appconfigservice';
+import { Subscription, debounceTime } from 'rxjs';
 
 @Component({
     selector: 'chart-basic-demo',
@@ -22,9 +24,20 @@ export class BasicDoc implements OnInit {
 
     basicOptions: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
@@ -48,22 +61,24 @@ export class BasicDoc implements OnInit {
                 plugins: {
                     legend: {
                         labels: {
-                            color: textColor
+                            fontColor: textColor
                         }
                     }
                 },
                 scales: {
-                    y: {
-                        beginAtZero: true,
+                    x: {
                         ticks: {
-                            color: textColorSecondary
+                            color: textColorSecondary,
+                            font: {
+                                weight: 500
+                            }
                         },
                         grid: {
-                            color: surfaceBorder,
+                            display: false,
                             drawBorder: false
                         }
                     },
-                    x: {
+                    y: {
                         ticks: {
                             color: textColorSecondary
                         },
diff --git a/src/app/showcase/doc/chart/combodoc.ts b/src/app/showcase/doc/chart/combodoc.ts
index c912e3f54d9..d1e0249e3e8 100644
--- a/src/app/showcase/doc/chart/combodoc.ts
+++ b/src/app/showcase/doc/chart/combodoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-combo-demo',
     template: `
@@ -19,9 +20,20 @@ export class ComboDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/doughnutdoc.ts b/src/app/showcase/doc/chart/doughnutdoc.ts
index efda6aba860..36e54b8a73e 100644
--- a/src/app/showcase/doc/chart/doughnutdoc.ts
+++ b/src/app/showcase/doc/chart/doughnutdoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-doughnut-demo',
     template: `
@@ -19,9 +20,20 @@ export class DoughnutDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+    
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
@@ -49,7 +61,6 @@ export class DoughnutDoc implements OnInit {
             };
         }
     }
-
     code: Code = {
         basic: `<p-chart type="doughnut" [data]="data" [options]="options"></p-chart>`,
         html: `
diff --git a/src/app/showcase/doc/chart/horizontalbardoc.ts b/src/app/showcase/doc/chart/horizontalbardoc.ts
index 77c39d2b19c..4a90253e016 100644
--- a/src/app/showcase/doc/chart/horizontalbardoc.ts
+++ b/src/app/showcase/doc/chart/horizontalbardoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-horizontal-bar-demo',
     template: `
@@ -19,9 +20,20 @@ export class HorizontalBarDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+    
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart()
+    }
+
+    initChart(){
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/linedoc.ts b/src/app/showcase/doc/chart/linedoc.ts
index c7cd4756e16..e1dc2fb978e 100644
--- a/src/app/showcase/doc/chart/linedoc.ts
+++ b/src/app/showcase/doc/chart/linedoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-line-demo',
     template: `
@@ -19,9 +20,20 @@ export class LineDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/linestyledoc.ts b/src/app/showcase/doc/chart/linestyledoc.ts
index 5bd73554764..4c612ad0eed 100644
--- a/src/app/showcase/doc/chart/linestyledoc.ts
+++ b/src/app/showcase/doc/chart/linestyledoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-line-style-demo',
     template: `
@@ -19,9 +20,20 @@ export class LineStyleDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/multiaxisdoc.ts b/src/app/showcase/doc/chart/multiaxisdoc.ts
index edcd92aa19b..debb7dc8cfb 100644
--- a/src/app/showcase/doc/chart/multiaxisdoc.ts
+++ b/src/app/showcase/doc/chart/multiaxisdoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-multi-axis-demo',
     template: `
@@ -19,9 +20,20 @@ export class MultiAxisDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/piedoc.ts b/src/app/showcase/doc/chart/piedoc.ts
index 260b8e005e0..06b60e9d97f 100644
--- a/src/app/showcase/doc/chart/piedoc.ts
+++ b/src/app/showcase/doc/chart/piedoc.ts
@@ -1,6 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { Code } from '../../domain/code';
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 
 @Component({
     selector: 'chart-pie-demo',
@@ -19,9 +21,20 @@ export class PieDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+    
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/polarareadoc.ts b/src/app/showcase/doc/chart/polarareadoc.ts
index 0b438c10734..6cf506310ea 100644
--- a/src/app/showcase/doc/chart/polarareadoc.ts
+++ b/src/app/showcase/doc/chart/polarareadoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-polar-area-demo',
     template: `
@@ -19,9 +20,19 @@ export class PolarAreaDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/radardoc.ts b/src/app/showcase/doc/chart/radardoc.ts
index 968da3827fd..708804a0612 100644
--- a/src/app/showcase/doc/chart/radardoc.ts
+++ b/src/app/showcase/doc/chart/radardoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-radar-demo',
     template: `
@@ -19,9 +20,20 @@ export class RadarDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/stackedbardoc.ts b/src/app/showcase/doc/chart/stackedbardoc.ts
index 74b4041ed00..e13c13c7401 100644
--- a/src/app/showcase/doc/chart/stackedbardoc.ts
+++ b/src/app/showcase/doc/chart/stackedbardoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-stacked-bar-demo',
     template: `
@@ -19,9 +20,20 @@ export class StackedBarDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+        this.initChart();
+    }
+
+    initChart() {
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/chart/verticalbardoc.ts b/src/app/showcase/doc/chart/verticalbardoc.ts
index 373446ef4d8..67aee8438c1 100644
--- a/src/app/showcase/doc/chart/verticalbardoc.ts
+++ b/src/app/showcase/doc/chart/verticalbardoc.ts
@@ -1,7 +1,8 @@
 import { isPlatformBrowser } from '@angular/common';
-import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, ChangeDetectorRef } from '@angular/core';
 import { Code } from '../../domain/code';
-
+import { Subscription, debounceTime } from 'rxjs';
+import { AppConfigService } from '../../service/appconfigservice';
 @Component({
     selector: 'chart-vertical-bar-demo',
     template: `
@@ -19,9 +20,20 @@ export class VerticalBarDoc implements OnInit {
 
     options: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any) {}
+    subscription!: Subscription;
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any, private configService: AppConfigService, private cd: ChangeDetectorRef) {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
+            this.initChart();
+            this.cd.markForCheck();
+        });
+    }
 
     ngOnInit() {
+      this.initChart()
+    }
+
+    initChart(){
         if (isPlatformBrowser(this.platformId)) {
             const documentStyle = getComputedStyle(document.documentElement);
             const textColor = documentStyle.getPropertyValue('--text-color');
diff --git a/src/app/showcase/doc/table/basicdoc.ts b/src/app/showcase/doc/table/basicdoc.ts
index 5f95c71ceea..5c8990da1eb 100644
--- a/src/app/showcase/doc/table/basicdoc.ts
+++ b/src/app/showcase/doc/table/basicdoc.ts
@@ -8,41 +8,43 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>DataTable requires a collection to display along with column components for the representation of the data.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-basic-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class BasicDoc implements OnInit {
+export class BasicDoc {
     products!: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
         });
     }
-
+    
     code: Code = {
         basic: `<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
     <ng-template pTemplate="header">
diff --git a/src/app/showcase/doc/table/celleditdoc.ts b/src/app/showcase/doc/table/celleditdoc.ts
index 9ff64f5150e..6b3f9dae977 100644
--- a/src/app/showcase/doc/table/celleditdoc.ts
+++ b/src/app/showcase/doc/table/celleditdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -8,71 +8,73 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>In-cell editing is enabled by adding <i>pEditableColumn</i> directive to an editable cell that has a <i>p-cellEditor</i> helper component to define the input-output templates for the edit and view modes respectively.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width:25%">Code</th>
-                        <th style="width:25%">Name</th>
-                        <th style="width:25%">Inventory Status</th>
-                        <th style="width:25%">Price</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product let-editing="editing">
-                    <tr>
-                        <td [pEditableColumn]="product.code" pEditableColumnField="code">
-                            <p-cellEditor>
-                                <ng-template pTemplate="input">
-                                    <input pInputText type="text" [(ngModel)]="product.code" />
-                                </ng-template>
-                                <ng-template pTemplate="output">
-                                    {{ product.code }}
-                                </ng-template>
-                            </p-cellEditor>
-                        </td>
-                        <td [pEditableColumn]="product.name" pEditableColumnField="name">
-                            <p-cellEditor>
-                                <ng-template pTemplate="input">
-                                    <input pInputText type="text" [(ngModel)]="product.name" required />
-                                </ng-template>
-                                <ng-template pTemplate="output">
-                                    {{ product.name }}
-                                </ng-template>
-                            </p-cellEditor>
-                        </td>
-                        <td [pEditableColumn]="product.inventoryStatus" pEditableColumnField="inventoryStatus">
-                            <p-cellEditor>
-                                <ng-template pTemplate="input">
-                                    <input pInputText [(ngModel)]="product.inventoryStatus" />
-                                </ng-template>
-                                <ng-template pTemplate="output">
-                                    {{ product.inventoryStatus }}
-                                </ng-template>
-                            </p-cellEditor>
-                        </td>
-                        <td [pEditableColumn]="product.price" pEditableColumnField="price">
-                            <p-cellEditor>
-                                <ng-template pTemplate="input">
-                                    <input pInputText type="text" [(ngModel)]="product.price" />
-                                </ng-template>
-                                <ng-template pTemplate="output">
-                                    {{ product.price | currency : 'USD' }}
-                                </ng-template>
-                            </p-cellEditor>
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width:25%">Code</th>
+                            <th style="width:25%">Name</th>
+                            <th style="width:25%">Inventory Status</th>
+                            <th style="width:25%">Price</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product let-editing="editing">
+                        <tr>
+                            <td [pEditableColumn]="product.code" pEditableColumnField="code">
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <input pInputText type="text" [(ngModel)]="product.code" />
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{ product.code }}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td [pEditableColumn]="product.name" pEditableColumnField="name">
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <input pInputText type="text" [(ngModel)]="product.name" required />
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{ product.name }}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td [pEditableColumn]="product.inventoryStatus" pEditableColumnField="inventoryStatus">
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <input pInputText [(ngModel)]="product.inventoryStatus" />
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{ product.inventoryStatus }}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td [pEditableColumn]="product.price" pEditableColumnField="price">
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <input pInputText type="text" [(ngModel)]="product.price" />
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{ product.price | currency : 'USD' }}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-cell-edit-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CellEditDoc implements OnInit {
+export class CellEditDoc {
     products!: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/checkboxselectiondoc.ts b/src/app/showcase/doc/table/checkboxselectiondoc.ts
index 88022ecef4e..531fc34e2e5 100644
--- a/src/app/showcase/doc/table/checkboxselectiondoc.ts
+++ b/src/app/showcase/doc/table/checkboxselectiondoc.ts
@@ -8,43 +8,45 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Multiple selection can also be handled using checkboxes by enabling the <i>selectionMode</i> property of column as <i>multiple</i>.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width: 4rem">
-                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
-                        </th>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>
-                            <p-tableCheckbox [value]="product"></p-tableCheckbox>
-                        </td>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width: 4rem">
+                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                            </th>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>
+                                <p-tableCheckbox [value]="product"></p-tableCheckbox>
+                            </td>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-checkbox-selection-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CheckboxSelectionDoc implements OnInit {
+export class CheckboxSelectionDoc {
     products!: Product[];
 
     selectedProducts!: Product;
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/columngroupdoc.ts b/src/app/showcase/doc/table/columngroupdoc.ts
index 9757c42be51..5653cf6b074 100644
--- a/src/app/showcase/doc/table/columngroupdoc.ts
+++ b/src/app/showcase/doc/table/columngroupdoc.ts
@@ -6,6 +6,7 @@ import { Code } from '../../domain/code';
     template: ` <app-docsectiontext>
             <p>Columns can be grouped using rowspan and <i>colspan</i> properties.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table [value]="sales" [tableStyle]="{ 'min-width': '50rem' }">
                 <ng-template pTemplate="header">
@@ -42,6 +43,7 @@ import { Code } from '../../domain/code';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-column-group-demo"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -54,7 +56,7 @@ export class ColumnGroupDoc {
 
     constructor(private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.sales = [
             { product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342 },
             { product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122 },
diff --git a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts
index 6241e129eb7..ed9b29e73e6 100644
--- a/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts
+++ b/src/app/showcase/doc/table/columnresizeexpandmodedoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -8,35 +8,37 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Setting <i>columnResizeMode</i> as <i>expand</i> changes the table width as well.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [resizableColumns]="true" columnResizeMode="expand" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th pResizableColumn>Code</th>
-                        <th pResizableColumn>Name</th>
-                        <th pResizableColumn>Category</th>
-                        <th pResizableColumn>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [resizableColumns]="true" columnResizeMode="expand" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th pResizableColumn>Code</th>
+                            <th pResizableColumn>Name</th>
+                            <th pResizableColumn>Category</th>
+                            <th pResizableColumn>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-column-resize-expand-mode-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ColumnResizeExpandModeDoc implements OnInit {
+export class ColumnResizeExpandModeDoc {
     products!: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/columnresizefitmodedoc.ts b/src/app/showcase/doc/table/columnresizefitmodedoc.ts
index f86b8263231..d1a99c7db6c 100644
--- a/src/app/showcase/doc/table/columnresizefitmodedoc.ts
+++ b/src/app/showcase/doc/table/columnresizefitmodedoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -8,35 +8,37 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Columns can be resized using drag drop by setting the <i>resizableColumns</i> to <i>true</i>. Fit mode is the default one and the overall table width does not change when a column is resized.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th pResizableColumn>Code</th>
-                        <th pResizableColumn>Name</th>
-                        <th pResizableColumn>Category</th>
-                        <th pResizableColumn>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th pResizableColumn>Code</th>
+                            <th pResizableColumn>Name</th>
+                            <th pResizableColumn>Category</th>
+                            <th pResizableColumn>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-column-resize-fit-mode-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ColumnResizeFitModeDoc implements OnInit {
+export class ColumnResizeFitModeDoc {
     products!: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts
index 7b66553e31f..9b41a32d585 100644
--- a/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts
+++ b/src/app/showcase/doc/table/columnresizescrollablemodedoc.ts
@@ -1,39 +1,41 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
 
 @Component({
     selector: 'column-resize-scrollable-mode-doc',
-    template: ` <div class="card">
-            <p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th pResizableColumn>Name</th>
-                        <th pResizableColumn>Country</th>
-                        <th pResizableColumn>Company</th>
-                        <th pResizableColumn>Representative</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer>
-                    <tr>
-                        <td>{{ customer.name }}</td>
-                        <td>{{ customer.country.name }}</td>
-                        <td>{{ customer.company }}</td>
-                        <td>{{ customer.representative.name }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+    template: ` <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [resizableColumns]="true" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th pResizableColumn>Name</th>
+                            <th pResizableColumn>Country</th>
+                            <th pResizableColumn>Company</th>
+                            <th pResizableColumn>Representative</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer>
+                        <tr>
+                            <td>{{ customer.name }}</td>
+                            <td>{{ customer.country.name }}</td>
+                            <td>{{ customer.company }}</td>
+                            <td>{{ customer.representative.name }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-column-resize-scrollable-mode-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ColumnResizeScrollableModeDoc implements OnInit {
+export class ColumnResizeScrollableModeDoc {
     customers!: Customer[];
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersLarge().then((customers) => {
             this.customers = customers;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/columnselectiondoc.ts b/src/app/showcase/doc/table/columnselectiondoc.ts
index 058b2f54c43..2b1e2fbfd90 100644
--- a/src/app/showcase/doc/table/columnselectiondoc.ts
+++ b/src/app/showcase/doc/table/columnselectiondoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
@@ -9,6 +9,7 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Selection using custom elements.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-toast></p-toast>
             <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
@@ -34,18 +35,19 @@ import { ProductService } from '../../service/productservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-column-selection-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [MessageService]
 })
-export class ColumnSelectionDoc implements OnInit {
+export class ColumnSelectionDoc {
     products!: Product[];
 
     selectedProduct!: Product;
 
     constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/columntoggledoc.ts b/src/app/showcase/doc/table/columntoggledoc.ts
index 29ca9068014..595a7bd31f4 100644
--- a/src/app/showcase/doc/table/columntoggledoc.ts
+++ b/src/app/showcase/doc/table/columntoggledoc.ts
@@ -12,29 +12,31 @@ interface Column {
     template: ` <app-docsectiontext>
             <p>This demo uses a multiselect component to implement toggleable columns.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [columns]="selectedColumns" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="caption">
-                    <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected" [style]="{ 'min-width': '200px' }" placeholder="Choose Columns"></p-multiSelect>
-                </ng-template>
-                <ng-template pTemplate="header" let-columns>
-                    <tr>
-                        <th>Code</th>
-                        <th *ngFor="let col of columns">
-                            {{ col.header }}
-                        </th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product let-columns="columns">
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td *ngFor="let col of columns">
-                            {{ product[col.field] }}
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [columns]="selectedColumns" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="caption">
+                        <p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header" selectedItemsLabel="{0} columns selected" [style]="{ 'min-width': '200px' }" placeholder="Choose Columns"></p-multiSelect>
+                    </ng-template>
+                    <ng-template pTemplate="header" let-columns>
+                        <tr>
+                            <th>Code</th>
+                            <th *ngFor="let col of columns">
+                                {{ col.header }}
+                            </th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product let-columns="columns">
+                        <tr>
+                            <td>{{ product.code }}</td>
+                            <td *ngFor="let col of columns">
+                                {{ product[col.field] }}
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-column-toggle-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -47,7 +49,7 @@ export class ColumnToggleDoc {
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/contextmenudoc.ts b/src/app/showcase/doc/table/contextmenudoc.ts
index 464c98d4a7a..a7ee92bad37 100644
--- a/src/app/showcase/doc/table/contextmenudoc.ts
+++ b/src/app/showcase/doc/table/contextmenudoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { MenuItem, MessageService } from 'primeng/api';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
@@ -13,32 +13,34 @@ import { ProductService } from '../../service/productservice';
                 <i>contextMenuSelection</i> property is used to get a hold of the right clicked row. For dynamic columns, setting <i>pContextMenuRowDisabled</i> property as true disables context menu for that particular row.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-contextMenu #cm [model]="items"></p-contextMenu>
-            <p-table [value]="products" [(contextMenuSelection)]="selectedProduct" [contextMenu]="cm" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Price</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr [pContextMenuRow]="product">
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.price | currency : 'USD' }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-contextMenu #cm [model]="items"></p-contextMenu>
+                <p-table [value]="products" [(contextMenuSelection)]="selectedProduct" [contextMenu]="cm" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Price</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr [pContextMenuRow]="product">
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.price | currency : 'USD' }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-context-menu-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [MessageService]
 })
-export class ContextMenuDoc implements OnInit {
+export class ContextMenuDoc {
     products!: Product[];
 
     selectedProduct!: Product;
@@ -47,7 +49,7 @@ export class ContextMenuDoc implements OnInit {
 
     constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsSmall().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/controlledselectiondoc.ts b/src/app/showcase/doc/table/controlledselectiondoc.ts
index db85ed9e5b5..c222793959b 100644
--- a/src/app/showcase/doc/table/controlledselectiondoc.ts
+++ b/src/app/showcase/doc/table/controlledselectiondoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -8,36 +8,38 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Row selection can be controlled by utilizing <i>rowSelectable</i> and <i>disabled</i> properties.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [rowSelectable]="isRowSelectable" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width: 4rem">
-                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
-                        </th>
-                        <th style="min-width:200px">Code</th>
-                        <th style="min-width:200px">Name</th>
-                        <th style="min-width:200px">Category</th>
-                        <th style="min-width:200px">Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>
-                            <p-tableCheckbox [value]="product" [disabled]="isOutOfStock(product)"></p-tableCheckbox>
-                        </td>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [rowSelectable]="isRowSelectable" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width: 4rem">
+                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                            </th>
+                            <th style="min-width:200px">Code</th>
+                            <th style="min-width:200px">Name</th>
+                            <th style="min-width:200px">Category</th>
+                            <th style="min-width:200px">Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>
+                                <p-tableCheckbox [value]="product" [disabled]="isOutOfStock(product)"></p-tableCheckbox>
+                            </td>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-controlled-selection-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ControlledSelectionDoc implements OnInit {
+export class ControlledSelectionDoc {
     products!: Product[];
 
     selectedProducts!: Product;
@@ -46,7 +48,7 @@ export class ControlledSelectionDoc implements OnInit {
         this.isRowSelectable = this.isRowSelectable.bind(this);
     }
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/customersdoc.ts b/src/app/showcase/doc/table/customersdoc.ts
index 804e453d28a..3f632cd6311 100644
--- a/src/app/showcase/doc/table/customersdoc.ts
+++ b/src/app/showcase/doc/table/customersdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer, Representative } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
@@ -8,6 +8,7 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>DataTable with selection, pagination, filtering, sorting and templating.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table
                 #dt
@@ -169,10 +170,11 @@ import { CustomerService } from '../../service/customerservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-customers-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CustomersDoc implements OnInit {
+export class CustomersDoc {
     customers!: Customer[];
 
     selectedCustomers!: Customer[];
@@ -187,7 +189,7 @@ export class CustomersDoc implements OnInit {
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersLarge().then((customers) => {
             this.customers = customers;
             this.loading = false;
diff --git a/src/app/showcase/doc/table/customsortdoc.ts b/src/app/showcase/doc/table/customsortdoc.ts
index 15ebe3e39c7..456637c6ee0 100644
--- a/src/app/showcase/doc/table/customsortdoc.ts
+++ b/src/app/showcase/doc/table/customsortdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { SortEvent } from 'primeng/api';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
@@ -12,6 +12,7 @@ import { ProductService } from '../../service/productservice';
                 <i>sortField</i>, <i>sortOrder</i> and <i>multiSortMeta</i>.
             </p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table [value]="products" (sortFunction)="customSort($event)" [customSort]="true" [tableStyle]="{ 'min-width': '60rem' }">
                 <ng-template pTemplate="header">
@@ -34,15 +35,16 @@ import { ProductService } from '../../service/productservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-custom-sort-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class CustomSortDoc implements OnInit {
+export class CustomSortDoc {
     products!: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/dynamicdoc.ts b/src/app/showcase/doc/table/dynamicdoc.ts
index 62af9fa8b54..e3cd8ded94e 100644
--- a/src/app/showcase/doc/table/dynamicdoc.ts
+++ b/src/app/showcase/doc/table/dynamicdoc.ts
@@ -12,6 +12,7 @@ interface Column {
     template: ` <app-docsectiontext>
             <p>Columns can be defined dynamically using the <i>*ngFor</i> directive.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table [columns]="cols" [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
                 <ng-template pTemplate="header" let-columns>
@@ -30,6 +31,7 @@ interface Column {
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-dynamic-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -40,7 +42,7 @@ export class DynamicDoc {
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/expandablerowgroupdoc.ts b/src/app/showcase/doc/table/expandablerowgroupdoc.ts
index 15fc5126e14..f053100861b 100644
--- a/src/app/showcase/doc/table/expandablerowgroupdoc.ts
+++ b/src/app/showcase/doc/table/expandablerowgroupdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
@@ -8,63 +8,65 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>When <i>expandableRowGroups</i> is present in subheader based row grouping, groups can be expanded and collapsed. State of the expansions are controlled using the <i>expandedRows</i> and <i>onRowToggle</i> properties.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="customers" sortField="representative.name" sortMode="single" dataKey="representative.name" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{ 'min-width': '70rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width:20%">Name</th>
-                        <th style="width:20%">Country</th>
-                        <th style="width:20%">Company</th>
-                        <th style="width:20%">Status</th>
-                        <th style="width:20%">Date</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="groupheader" let-customer let-rowIndex="rowIndex" let-expanded="expanded">
-                    <tr>
-                        <td colspan="5">
-                            <button type="button" pButton pRipple [pRowToggler]="customer" class="p-button-text p-button-rounded p-button-plain mr-2" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
-                            <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
-                            <span class="font-bold ml-2">{{ customer.representative.name }}</span>
-                        </td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="groupfooter" let-customer>
-                    <tr class="p-rowgroup-footer">
-                        <td colspan="4" style="text-align: right">Total Customers</td>
-                        <td>{{ calculateCustomerTotal(customer.representative.name) }}</td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="rowexpansion" let-customer>
-                    <tr>
-                        <td>
-                            {{ customer.name }}
-                        </td>
-                        <td>
-                            <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
-                            <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
-                        </td>
-                        <td>
-                            {{ customer.company }}
-                        </td>
-                        <td>
-                            <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
-                        </td>
-                        <td>
-                            {{ customer.date }}
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="customers" sortField="representative.name" sortMode="single" dataKey="representative.name" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{ 'min-width': '70rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width:20%">Name</th>
+                            <th style="width:20%">Country</th>
+                            <th style="width:20%">Company</th>
+                            <th style="width:20%">Status</th>
+                            <th style="width:20%">Date</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="groupheader" let-customer let-rowIndex="rowIndex" let-expanded="expanded">
+                        <tr>
+                            <td colspan="5">
+                                <button type="button" pButton pRipple [pRowToggler]="customer" class="p-button-text p-button-rounded p-button-plain mr-2" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
+                                <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
+                                <span class="font-bold ml-2">{{ customer.representative.name }}</span>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="groupfooter" let-customer>
+                        <tr class="p-rowgroup-footer">
+                            <td colspan="4" style="text-align: right">Total Customers</td>
+                            <td>{{ calculateCustomerTotal(customer.representative.name) }}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="rowexpansion" let-customer>
+                        <tr>
+                            <td>
+                                {{ customer.name }}
+                            </td>
+                            <td>
+                                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
+                                <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
+                            </td>
+                            <td>
+                                {{ customer.company }}
+                            </td>
+                            <td>
+                                <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
+                            </td>
+                            <td>
+                                {{ customer.date }}
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-expandable-row-group-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ExpandableRowGroupDoc implements OnInit {
+export class ExpandableRowGroupDoc {
     customers!: Customer[];
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMedium().then((data) => {
             this.customers = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/exportdoc.ts b/src/app/showcase/doc/table/exportdoc.ts
index 15fdcef8b42..e0b5919e441 100644
--- a/src/app/showcase/doc/table/exportdoc.ts
+++ b/src/app/showcase/doc/table/exportdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import * as FileSaver from 'file-saver';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
@@ -24,36 +24,38 @@ interface ExportColumn {
             </p>
             <p>PDF and EXCEL export are also available using 3rd party libraries such as jspdf. Example below demonstrates how to implement all three export options.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [exportHeader]="'customExportHeader'" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="caption">
-                    <div class="flex">
-                        <button type="button" pButton pRipple icon="pi pi-file" (click)="dt.exportCSV()" class="mr-2" pTooltip="CSV" tooltipPosition="bottom"></button>
-                        <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success mr-2" pTooltip="XLS" tooltipPosition="bottom"></button>
-                        <button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()" class="p-button-warning mr-2" pTooltip="PDF" tooltipPosition="bottom"></button>
-                        <button type="button" pButton pRipple icon="pi pi-filter" (click)="dt.exportCSV({ selectionOnly: true })" class="p-button-info ml-auto" pTooltip="Selection Only" tooltipPosition="bottom"></button>
-                    </div>
-                </ng-template>
-                <ng-template pTemplate="header" let-columns>
-                    <tr>
-                        <th *ngFor="let col of columns">
-                            {{ col.header }}
-                        </th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-rowData let-columns="columns">
-                    <tr [pSelectableRow]="rowData">
-                        <td *ngFor="let col of columns">
-                            {{ rowData[col.field] }}
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [exportHeader]="'customExportHeader'" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="caption">
+                        <div class="flex">
+                            <button type="button" pButton pRipple icon="pi pi-file" (click)="dt.exportCSV()" class="mr-2" pTooltip="CSV" tooltipPosition="bottom"></button>
+                            <button type="button" pButton pRipple icon="pi pi-file-excel" (click)="exportExcel()" class="p-button-success mr-2" pTooltip="XLS" tooltipPosition="bottom"></button>
+                            <button type="button" pButton pRipple icon="pi pi-file-pdf" (click)="exportPdf()" class="p-button-warning mr-2" pTooltip="PDF" tooltipPosition="bottom"></button>
+                            <button type="button" pButton pRipple icon="pi pi-filter" (click)="dt.exportCSV({ selectionOnly: true })" class="p-button-info ml-auto" pTooltip="Selection Only" tooltipPosition="bottom"></button>
+                        </div>
+                    </ng-template>
+                    <ng-template pTemplate="header" let-columns>
+                        <tr>
+                            <th *ngFor="let col of columns">
+                                {{ col.header }}
+                            </th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-rowData let-columns="columns">
+                        <tr [pSelectableRow]="rowData">
+                            <td *ngFor="let col of columns">
+                                {{ rowData[col.field] }}
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-export-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ExportDoc implements OnInit {
+export class ExportDoc {
     products!: Product[];
 
     selectedProducts!: Product[];
@@ -64,7 +66,7 @@ export class ExportDoc implements OnInit {
 
     exportColumns!: ExportColumn[];
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/filtermenudoc.ts b/src/app/showcase/doc/table/filtermenudoc.ts
index 9c11e0580cc..dfce1f6426f 100644
--- a/src/app/showcase/doc/table/filtermenudoc.ts
+++ b/src/app/showcase/doc/table/filtermenudoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Table } from 'primeng/table';
 import { Code } from '../../domain/code';
 import { Customer, Representative } from '../../domain/customer';
@@ -9,6 +9,7 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>Filters are displayed in an overlay.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table
                 #dt1
@@ -152,10 +153,11 @@ import { CustomerService } from '../../service/customerservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-filter-menu-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FilterMenuDoc implements OnInit {
+export class FilterMenuDoc {
     customers!: Customer[];
 
     representatives!: Representative[];
@@ -168,7 +170,7 @@ export class FilterMenuDoc implements OnInit {
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.customerService.getCustomersLarge().then((customers) => {
             this.customers = customers;
             this.loading = false;
diff --git a/src/app/showcase/doc/table/filterrowdoc.ts b/src/app/showcase/doc/table/filterrowdoc.ts
index 060d3e05795..217bc54521c 100644
--- a/src/app/showcase/doc/table/filterrowdoc.ts
+++ b/src/app/showcase/doc/table/filterrowdoc.ts
@@ -9,105 +9,107 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>Filters are displayed inline within a separate row.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table
-                #dt2
-                [value]="customers"
-                dataKey="id"
-                [rows]="10"
-                [showCurrentPageReport]="true"
-                [rowsPerPageOptions]="[10, 25, 50]"
-                [loading]="loading"
-                [paginator]="true"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
-                [tableStyle]="{ 'min-width': '75rem' }"
-            >
-                <ng-template pTemplate="caption">
-                    <div class="flex">
-                        <span class="p-input-icon-left ml-auto">
-                            <i class="pi pi-search"></i>
-                            <input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
-                        </span>
-                    </div>
-                </ng-template>
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width:22%">Name</th>
-                        <th style="width:22%">Country</th>
-                        <th style="width:22%">Agent</th>
-                        <th style="width:22%">Status</th>
-                        <th style="width:12%">Verified</th>
-                    </tr>
-                    <tr>
-                        <th>
-                            <p-columnFilter type="text" field="name"></p-columnFilter>
-                        </th>
-                        <th>
-                            <p-columnFilter type="text" field="country.name"></p-columnFilter>
-                        </th>
-                        <th>
-                            <p-columnFilter field="representative" matchMode="in" [showMenu]="false">
-                                <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                                    <p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
-                                        <ng-template let-option pTemplate="item">
-                                            <div class="inline-block vertical-align-middle">
-                                                <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
-                                                <span class="ml-1 mt-1">{{ option.name }}</span>
-                                            </div>
-                                        </ng-template>
-                                    </p-multiSelect>
-                                </ng-template>
-                            </p-columnFilter>
-                        </th>
-                        <th>
-                            <p-columnFilter field="status" matchMode="equals" [showMenu]="false">
-                                <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                                    <p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [showClear]="true">
-                                        <ng-template let-option pTemplate="item">
-                                            <p-tag [value]="option.value" [severity]="getSeverity(option.label)"></p-tag>
-                                        </ng-template>
-                                    </p-dropdown>
-                                </ng-template>
-                            </p-columnFilter>
-                        </th>
-                        <th>
-                            <p-columnFilter type="boolean" field="verified"></p-columnFilter>
-                        </th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer>
-                    <tr>
-                        <td>
-                            {{ customer.name }}
-                        </td>
-                        <td>
-                            <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
-                            <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
-                        </td>
-                        <td>
-                            <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
-                            <span class="ml-1 vertical-align-middle">{{ customer.representative.name }}</span>
-                        </td>
-                        <td>
-                            <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
-                        </td>
-                        <td>
-                            <i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': customer.verified, 'text-red-500 pi-times-circle': !customer.verified }"></i>
-                        </td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="emptymessage">
-                    <tr>
-                        <td colspan="5">No customers found.</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table
+                    #dt2
+                    [value]="customers"
+                    dataKey="id"
+                    [rows]="10"
+                    [showCurrentPageReport]="true"
+                    [rowsPerPageOptions]="[10, 25, 50]"
+                    [loading]="loading"
+                    [paginator]="true"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+                    [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
+                    [tableStyle]="{ 'min-width': '75rem' }"
+                >
+                    <ng-template pTemplate="caption">
+                        <div class="flex">
+                            <span class="p-input-icon-left ml-auto">
+                                <i class="pi pi-search"></i>
+                                <input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
+                            </span>
+                        </div>
+                    </ng-template>
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width:22%">Name</th>
+                            <th style="width:22%">Country</th>
+                            <th style="width:22%">Agent</th>
+                            <th style="width:22%">Status</th>
+                            <th style="width:12%">Verified</th>
+                        </tr>
+                        <tr>
+                            <th>
+                                <p-columnFilter type="text" field="name"></p-columnFilter>
+                            </th>
+                            <th>
+                                <p-columnFilter type="text" field="country.name"></p-columnFilter>
+                            </th>
+                            <th>
+                                <p-columnFilter field="representative" matchMode="in" [showMenu]="false">
+                                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+                                        <p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
+                                            <ng-template let-option pTemplate="item">
+                                                <div class="inline-block vertical-align-middle">
+                                                    <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
+                                                    <span class="ml-1 mt-1">{{ option.name }}</span>
+                                                </div>
+                                            </ng-template>
+                                        </p-multiSelect>
+                                    </ng-template>
+                                </p-columnFilter>
+                            </th>
+                            <th>
+                                <p-columnFilter field="status" matchMode="equals" [showMenu]="false">
+                                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+                                        <p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [showClear]="true">
+                                            <ng-template let-option pTemplate="item">
+                                                <p-tag [value]="option.value" [severity]="getSeverity(option.label)"></p-tag>
+                                            </ng-template>
+                                        </p-dropdown>
+                                    </ng-template>
+                                </p-columnFilter>
+                            </th>
+                            <th>
+                                <p-columnFilter type="boolean" field="verified"></p-columnFilter>
+                            </th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer>
+                        <tr>
+                            <td>
+                                {{ customer.name }}
+                            </td>
+                            <td>
+                                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
+                                <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
+                            </td>
+                            <td>
+                                <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
+                                <span class="ml-1 vertical-align-middle">{{ customer.representative.name }}</span>
+                            </td>
+                            <td>
+                                <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
+                            </td>
+                            <td>
+                                <i class="pi" [ngClass]="{ 'text-green-500 pi-check-circle': customer.verified, 'text-red-500 pi-times-circle': !customer.verified }"></i>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="emptymessage">
+                        <tr>
+                            <td colspan="5">No customers found.</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-filter-row-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FilterRowDoc implements OnInit {
+export class FilterRowDoc {
     customers!: Customer[];
 
     representatives!: Representative[];
@@ -120,7 +122,7 @@ export class FilterRowDoc implements OnInit {
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersLarge().then((customers) => {
             this.customers = customers;
             this.loading = false;
diff --git a/src/app/showcase/doc/table/flexiblescrolldoc.ts b/src/app/showcase/doc/table/flexiblescrolldoc.ts
index d480dd4be55..df499a0bc10 100644
--- a/src/app/showcase/doc/table/flexiblescrolldoc.ts
+++ b/src/app/showcase/doc/table/flexiblescrolldoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
@@ -11,6 +11,7 @@ import { CustomerService } from '../../service/customerservice';
                 viewport adjusts itself according to the size changes.
             </p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <div class="flex justify-content-center">
                 <button type="button" (click)="showDialog()" pButton icon="pi pi-external-link" label="View"></button>
@@ -39,17 +40,18 @@ import { CustomerService } from '../../service/customerservice';
                 </ng-template>
             </p-dialog>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-flexible-scroll-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FlexibleScrollDoc implements OnInit {
+export class FlexibleScrollDoc {
     customers!: Customer[];
 
     dialogVisible: boolean = false;
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMedium().then((data) => {
             this.customers = data;
         });
diff --git a/src/app/showcase/doc/table/frozencolumnsdoc.ts b/src/app/showcase/doc/table/frozencolumnsdoc.ts
index e31c57ec2d9..5e2aee183be 100644
--- a/src/app/showcase/doc/table/frozencolumnsdoc.ts
+++ b/src/app/showcase/doc/table/frozencolumnsdoc.ts
@@ -8,49 +8,51 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>Certain columns can be frozen by using the <i>pFrozenColumn</i> directive of the table component. In addition, <i>alignFrozen</i> is available to define whether the column should be fixed on the left or right.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-toggleButton [(ngModel)]="balanceFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Balance'" offLabel="Balance"></p-toggleButton>
-
-            <p-table [value]="customers" [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="min-width:200px" pFrozenColumn>Name</th>
-                        <th style="min-width:100px">Id</th>
-                        <th style="min-width:200px">Country</th>
-                        <th style="min-width:200px">Date</th>
-                        <th style="min-width:200px">Company</th>
-                        <th style="min-width:200px">Status</th>
-                        <th style="min-width:200px">Activity</th>
-                        <th style="min-width:200px">Representative</th>
-                        <th style="min-width:200px" alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">Balance</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer>
-                    <tr>
-                        <td pFrozenColumn>{{ customer.name }}</td>
-                        <td style="min-width:100px">{{ customer.id }}</td>
-                        <td>{{ customer.country.name }}</td>
-                        <td>{{ customer.date }}</td>
-                        <td>{{ customer.company }}</td>
-                        <td>{{ customer.status }}</td>
-                        <td>{{ customer.activity }}</td>
-                        <td>{{ customer.representative.name }}</td>
-                        <td alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">{{ formatCurrency(customer.balance) }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-toggleButton [(ngModel)]="balanceFrozen" [onIcon]="'pi pi-lock'" offIcon="pi pi-lock-open" [onLabel]="'Balance'" offLabel="Balance"></p-toggleButton>
+
+                <p-table [value]="customers" [scrollable]="true" scrollHeight="400px" styleClass="mt-3">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="min-width:200px" pFrozenColumn>Name</th>
+                            <th style="min-width:100px">Id</th>
+                            <th style="min-width:200px">Country</th>
+                            <th style="min-width:200px">Date</th>
+                            <th style="min-width:200px">Company</th>
+                            <th style="min-width:200px">Status</th>
+                            <th style="min-width:200px">Activity</th>
+                            <th style="min-width:200px">Representative</th>
+                            <th style="min-width:200px" alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">Balance</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer>
+                        <tr>
+                            <td pFrozenColumn>{{ customer.name }}</td>
+                            <td style="min-width:100px">{{ customer.id }}</td>
+                            <td>{{ customer.country.name }}</td>
+                            <td>{{ customer.date }}</td>
+                            <td>{{ customer.company }}</td>
+                            <td>{{ customer.status }}</td>
+                            <td>{{ customer.activity }}</td>
+                            <td>{{ customer.representative.name }}</td>
+                            <td alignFrozen="right" pFrozenColumn [frozen]="balanceFrozen">{{ formatCurrency(customer.balance) }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-frozen-columns-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FrozenColumnsDoc implements OnInit {
+export class FrozenColumnsDoc {
     balanceFrozen: boolean = false;
 
     customers!: Customer[];
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMedium().then((data) => {
             this.customers = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/frozenrowsdoc.ts b/src/app/showcase/doc/table/frozenrowsdoc.ts
index 93909c51e75..bd473bcf91c 100644
--- a/src/app/showcase/doc/table/frozenrowsdoc.ts
+++ b/src/app/showcase/doc/table/frozenrowsdoc.ts
@@ -8,52 +8,54 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>Frozen rows are used to fix certain rows while scrolling, this data is defined with the <i>frozenValue</i> property.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="unlockedCustomers" [frozenValue]="lockedCustomers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{ 'min-width': '60rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Name</th>
-                        <th>Country</th>
-                        <th>Company</th>
-                        <th>Representative</th>
-                        <th style="width:5rem"></th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="frozenbody" let-customer let-index="rowIndex">
-                    <tr>
-                        <td>{{ customer.name }}</td>
-                        <td>{{ customer.country.name }}</td>
-                        <td>{{ customer.company }}</td>
-                        <td>{{ customer.representative.name }}</td>
-                        <td>
-                            <button pButton pRipple type="button" [icon]="'pi pi-lock-open'" (click)="toggleLock(customer, true, index)" class="p-button-sm p-button-text"></button>
-                        </td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer let-index="rowIndex">
-                    <tr>
-                        <td>{{ customer.name }}</td>
-                        <td>{{ customer.country.name }}</td>
-                        <td>{{ customer.company }}</td>
-                        <td>{{ customer.representative.name }}</td>
-                        <td>
-                            <button pButton pRipple type="button" [icon]="'pi pi-lock'" [disabled]="lockedCustomers.length >= 2" (click)="toggleLock(customer, false, index)" class="p-button-sm p-button-text"></button>
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="unlockedCustomers" [frozenValue]="lockedCustomers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{ 'min-width': '60rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Name</th>
+                            <th>Country</th>
+                            <th>Company</th>
+                            <th>Representative</th>
+                            <th style="width:5rem"></th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="frozenbody" let-customer let-index="rowIndex">
+                        <tr>
+                            <td>{{ customer.name }}</td>
+                            <td>{{ customer.country.name }}</td>
+                            <td>{{ customer.company }}</td>
+                            <td>{{ customer.representative.name }}</td>
+                            <td>
+                                <button pButton pRipple type="button" [icon]="'pi pi-lock-open'" (click)="toggleLock(customer, true, index)" class="p-button-sm p-button-text"></button>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer let-index="rowIndex">
+                        <tr>
+                            <td>{{ customer.name }}</td>
+                            <td>{{ customer.country.name }}</td>
+                            <td>{{ customer.company }}</td>
+                            <td>{{ customer.representative.name }}</td>
+                            <td>
+                                <button pButton pRipple type="button" [icon]="'pi pi-lock'" [disabled]="lockedCustomers.length >= 2" (click)="toggleLock(customer, false, index)" class="p-button-sm p-button-text"></button>
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-frozen-rows-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class FrozenRowsDoc implements OnInit {
+export class FrozenRowsDoc {
     unlockedCustomers!: Customer[];
 
     lockedCustomers!: Customer[];
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMedium().then((data) => {
             this.unlockedCustomers = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/gridlinesdoc.ts b/src/app/showcase/doc/table/gridlinesdoc.ts
index 42280e85cde..cea6a97d548 100644
--- a/src/app/showcase/doc/table/gridlinesdoc.ts
+++ b/src/app/showcase/doc/table/gridlinesdoc.ts
@@ -8,28 +8,30 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Adding <i>p-datatable-gridlines</i> class displays grid lines.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="caption"> Header </ng-template>
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="summary">Footer</ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" styleClass="p-datatable-gridlines" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="caption"> Header </ng-template>
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="summary">Footer</ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-gridlines-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -38,7 +40,7 @@ export class GridlinesDoc {
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/horizontalandverticaldoc.ts b/src/app/showcase/doc/table/horizontalandverticaldoc.ts
index 3295d2116a1..f0152d05df9 100644
--- a/src/app/showcase/doc/table/horizontalandverticaldoc.ts
+++ b/src/app/showcase/doc/table/horizontalandverticaldoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
@@ -8,6 +8,7 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>Horizontal and vertical scroll can be used together to enable double axis scrolling.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table [value]="customers" [scrollable]="true" scrollHeight="400px">
                 <ng-template pTemplate="header">
@@ -51,15 +52,16 @@ import { CustomerService } from '../../service/customerservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-horizontal-and-vertical-scroll-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class HorizontalAndVerticalScrollDoc implements OnInit {
+export class HorizontalAndVerticalScrollDoc {
     customers!: Customer[];
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMedium().then((data) => {
             this.customers = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/lazyloaddoc.ts b/src/app/showcase/doc/table/lazyloaddoc.ts
index a390dbb476b..75e5e32a85f 100644
--- a/src/app/showcase/doc/table/lazyloaddoc.ts
+++ b/src/app/showcase/doc/table/lazyloaddoc.ts
@@ -13,73 +13,75 @@ import { CustomerService } from '../../service/customerservice';
                 the next page or whether there are instant data changes, the selection array can be implemented in several ways. One of them is as in the example below.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table
-                [value]="customers"
-                [lazy]="true"
-                (onLazyLoad)="loadCustomers($event)"
-                dataKey="id"
-                [tableStyle]="{ 'min-width': '75rem' }"
-                [selection]="selectedCustomers"
-                (selectionChange)="onSelectionChange($event)"
-                [selectAll]="selectAll"
-                (selectAllChange)="onSelectAllChange($event)"
-                [paginator]="true"
-                [rows]="10"
-                [totalRecords]="totalRecords"
-                [loading]="loading"
-                [globalFilterFields]="['name', 'country.name', 'company', 'representative.name']"
-            >
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width: 4rem"></th>
-                        <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
-                        <th pSortableColumn="country.name">Country <p-sortIcon field="country.name"></p-sortIcon></th>
-                        <th pSortableColumn="company">Company <p-sortIcon field="company"></p-sortIcon></th>
-                        <th pSortableColumn="representative.name">Representative <p-sortIcon field="representative.name"></p-sortIcon></th>
-                    </tr>
-                    <tr>
-                        <th style="width: 4rem">
-                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
-                        </th>
-                        <th>
-                            <p-columnFilter type="text" field="name"></p-columnFilter>
-                        </th>
-                        <th>
-                            <p-columnFilter type="text" field="country.name"></p-columnFilter>
-                        </th>
-                        <th>
-                            <p-columnFilter type="text" field="company"></p-columnFilter>
-                        </th>
-                        <th>
-                            <p-columnFilter field="representative" matchMode="in" [showMenu]="false">
-                                <ng-template pTemplate="filter" let-value let-filter="filterCallback">
-                                    <p-multiSelect [ngModel]="value" appendTo="body" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name" [maxSelectedLabels]="1" [selectedItemsLabel]="'{0} items'">
-                                        <ng-template let-option pTemplate="item">
-                                            <div class="inline-block vertical-align-middle">
-                                                <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
-                                                <span class="ml-1 mt-1">{{ option.name }}</span>
-                                            </div>
-                                        </ng-template>
-                                    </p-multiSelect>
-                                </ng-template>
-                            </p-columnFilter>
-                        </th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer>
-                    <tr>
-                        <td>
-                            <p-tableCheckbox [value]="customer"></p-tableCheckbox>
-                        </td>
-                        <td>{{ customer.name }}</td>
-                        <td>{{ customer.country.name }}</td>
-                        <td>{{ customer.company }}</td>
-                        <td>{{ customer.representative.name }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table
+                    [value]="customers"
+                    [lazy]="true"
+                    (onLazyLoad)="loadCustomers($event)"
+                    dataKey="id"
+                    [tableStyle]="{ 'min-width': '75rem' }"
+                    [selection]="selectedCustomers"
+                    (selectionChange)="onSelectionChange($event)"
+                    [selectAll]="selectAll"
+                    (selectAllChange)="onSelectAllChange($event)"
+                    [paginator]="true"
+                    [rows]="10"
+                    [totalRecords]="totalRecords"
+                    [loading]="loading"
+                    [globalFilterFields]="['name', 'country.name', 'company', 'representative.name']"
+                >
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width: 4rem"></th>
+                            <th pSortableColumn="name">Name <p-sortIcon field="name"></p-sortIcon></th>
+                            <th pSortableColumn="country.name">Country <p-sortIcon field="country.name"></p-sortIcon></th>
+                            <th pSortableColumn="company">Company <p-sortIcon field="company"></p-sortIcon></th>
+                            <th pSortableColumn="representative.name">Representative <p-sortIcon field="representative.name"></p-sortIcon></th>
+                        </tr>
+                        <tr>
+                            <th style="width: 4rem">
+                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                            </th>
+                            <th>
+                                <p-columnFilter type="text" field="name"></p-columnFilter>
+                            </th>
+                            <th>
+                                <p-columnFilter type="text" field="country.name"></p-columnFilter>
+                            </th>
+                            <th>
+                                <p-columnFilter type="text" field="company"></p-columnFilter>
+                            </th>
+                            <th>
+                                <p-columnFilter field="representative" matchMode="in" [showMenu]="false">
+                                    <ng-template pTemplate="filter" let-value let-filter="filterCallback">
+                                        <p-multiSelect [ngModel]="value" appendTo="body" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name" [maxSelectedLabels]="1" [selectedItemsLabel]="'{0} items'">
+                                            <ng-template let-option pTemplate="item">
+                                                <div class="inline-block vertical-align-middle">
+                                                    <img [alt]="option.label" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ option.image }}" width="24" class="vertical-align-middle" />
+                                                    <span class="ml-1 mt-1">{{ option.name }}</span>
+                                                </div>
+                                            </ng-template>
+                                        </p-multiSelect>
+                                    </ng-template>
+                                </p-columnFilter>
+                            </th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer>
+                        <tr>
+                            <td>
+                                <p-tableCheckbox [value]="customer"></p-tableCheckbox>
+                            </td>
+                            <td>{{ customer.name }}</td>
+                            <td>{{ customer.country.name }}</td>
+                            <td>{{ customer.company }}</td>
+                            <td>{{ customer.representative.name }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-lazy-load-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -99,6 +101,10 @@ export class LazyLoadDoc implements OnInit {
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
     ngOnInit() {
+        this.loading = true;
+    }
+
+    loadDemoData() {
         this.representatives = [
             { name: 'Amy Elsner', image: 'amyelsner.png' },
             { name: 'Anna Fali', image: 'annafali.png' },
@@ -111,8 +117,6 @@ export class LazyLoadDoc implements OnInit {
             { name: 'Stephen Shaw', image: 'stephenshaw.png' },
             { name: 'Xuxue Feng', image: 'xuxuefeng.png' }
         ];
-
-        this.loading = true;
     }
 
     loadCustomers(event: LazyLoadEvent) {
diff --git a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts
index 4572d26c4d1..6705fd59679 100644
--- a/src/app/showcase/doc/table/multiplecolumnsortdoc.ts
+++ b/src/app/showcase/doc/table/multiplecolumnsortdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -9,38 +9,40 @@ import { ProductService } from '../../service/productservice';
         <app-docsectiontext>
             <p>Multiple columns can be sorted by defining <i>sortMode</i> as <i>multiple</i>. This mode requires metaKey (e.g. <i>⌘</i>) to be pressed when clicking a header.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [tableStyle]="{ 'min-width': '60rem' }" sortMode="multiple">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th pSortableColumn="code" style="width:20%">Code <p-sortIcon field="code"></p-sortIcon></th>
-                        <th pSortableColumn="name" style="width:20%">Name <p-sortIcon field="name"></p-sortIcon></th>
-                        <th pSortableColumn="category" style="width:20%">Category <p-sortIcon field="category"></p-sortIcon></th>
-                        <th pSortableColumn="quantity" style="width:20%">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
-                        <th pSortableColumn="price" style="width:20%">Price <p-sortIcon field="price"></p-sortIcon></th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                        <td>{{ product.price | currency : 'USD' }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [tableStyle]="{ 'min-width': '60rem' }" sortMode="multiple">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th pSortableColumn="code" style="width:20%">Code <p-sortIcon field="code"></p-sortIcon></th>
+                            <th pSortableColumn="name" style="width:20%">Name <p-sortIcon field="name"></p-sortIcon></th>
+                            <th pSortableColumn="category" style="width:20%">Category <p-sortIcon field="category"></p-sortIcon></th>
+                            <th pSortableColumn="quantity" style="width:20%">Quantity <p-sortIcon field="quantity"></p-sortIcon></th>
+                            <th pSortableColumn="price" style="width:20%">Price <p-sortIcon field="price"></p-sortIcon></th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                            <td>{{ product.price | currency : 'USD' }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-multiple-column-sort-demo" [extFiles]="extFiles"></app-code>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MultipleColumnSortDoc implements OnInit {
+export class MultipleColumnSortDoc {
     products: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/multipleselectiondoc.ts b/src/app/showcase/doc/table/multipleselectiondoc.ts
index c613c5dd485..5454951dd65 100644
--- a/src/app/showcase/doc/table/multipleselectiondoc.ts
+++ b/src/app/showcase/doc/table/multipleselectiondoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -11,35 +11,37 @@ import { ProductService } from '../../service/productservice';
                 enables multiple selection without meta key.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <div class="flex justify-content-center align-items-center gap-2 mb-3">
-                <p-inputSwitch inputId="metakey" [(ngModel)]="metaKeySelection" label="MetaKey"></p-inputSwitch>
-                <span>MetaKey</span>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <div class="flex justify-content-center align-items-center gap-2 mb-3">
+                    <p-inputSwitch inputId="metakey" [(ngModel)]="metaKeySelection" label="MetaKey"></p-inputSwitch>
+                    <span>MetaKey</span>
+                </div>
+                <p-table [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [metaKeySelection]="metaKeySelection" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="caption"> Multiple Selection with MetaKey </ng-template>
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
+                        <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
             </div>
-            <p-table [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [metaKeySelection]="metaKeySelection" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="caption"> Multiple Selection with MetaKey </ng-template>
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product let-rowIndex="rowIndex">
-                    <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex">
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-multiple-selection-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MultipleSelectionDoc implements OnInit {
+export class MultipleSelectionDoc {
     products!: Product[];
 
     selectedProducts!: Product;
@@ -48,7 +50,7 @@ export class MultipleSelectionDoc implements OnInit {
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/pageonlyselectiondoc.ts b/src/app/showcase/doc/table/pageonlyselectiondoc.ts
index 98ad9bb8046..e8f658eaa7b 100644
--- a/src/app/showcase/doc/table/pageonlyselectiondoc.ts
+++ b/src/app/showcase/doc/table/pageonlyselectiondoc.ts
@@ -5,43 +5,45 @@ import { ProductService } from '../../service/productservice';
 
 @Component({
     selector: 'page-only-selection-doc',
-    template: ` <div class="card">
-            <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [paginator]="true" [rows]="5" [selectionPageOnly]="true" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width: 4rem">
-                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
-                        </th>
-                        <th style="min-width:200px">Code</th>
-                        <th style="min-width:200px">Name</th>
-                        <th style="min-width:200px">Category</th>
-                        <th style="min-width:200px">Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>
-                            <p-tableCheckbox [value]="product"></p-tableCheckbox>
-                        </td>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+    template: ` <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [(selection)]="selectedProducts" dataKey="code" [paginator]="true" [rows]="5" [selectionPageOnly]="true" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width: 4rem">
+                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                            </th>
+                            <th style="min-width:200px">Code</th>
+                            <th style="min-width:200px">Name</th>
+                            <th style="min-width:200px">Category</th>
+                            <th style="min-width:200px">Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>
+                                <p-tableCheckbox [value]="product"></p-tableCheckbox>
+                            </td>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-page-only-selection-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class PageOnlySelectionDoc implements OnInit {
+export class PageOnlySelectionDoc {
     products!: Product[];
 
     selectedProducts!: Product;
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/paginatorbasicdoc.ts b/src/app/showcase/doc/table/paginatorbasicdoc.ts
index df443d8c440..2b8a053aabd 100644
--- a/src/app/showcase/doc/table/paginatorbasicdoc.ts
+++ b/src/app/showcase/doc/table/paginatorbasicdoc.ts
@@ -11,40 +11,42 @@ import { CustomerService } from '../../service/customerservice';
                 <a [routerLink]="['/table#lazy']">lazy loading</a> example.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table
-                [value]="customers"
-                [paginator]="true"
-                [rows]="5"
-                [showCurrentPageReport]="true"
-                [tableStyle]="{ 'min-width': '50rem' }"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                [rowsPerPageOptions]="[5, 10, 20]"
-            >
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width:25%">Name</th>
-                        <th style="width:25%">Country</th>
-                        <th style="width:25%">Company</th>
-                        <th style="width:25%">Representative</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer>
-                    <tr>
-                        <td>{{ customer.name }}</td>
-                        <td>{{ customer.country.name }}</td>
-                        <td>{{ customer.company }}</td>
-                        <td>{{ customer.representative.name }}</td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="paginatorleft">
-                    <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
-                </ng-template>
-                <ng-template pTemplate="paginatorright">
-                    <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table
+                    [value]="customers"
+                    [paginator]="true"
+                    [rows]="5"
+                    [showCurrentPageReport]="true"
+                    [tableStyle]="{ 'min-width': '50rem' }"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+                    [rowsPerPageOptions]="[5, 10, 20]"
+                >
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width:25%">Name</th>
+                            <th style="width:25%">Country</th>
+                            <th style="width:25%">Company</th>
+                            <th style="width:25%">Representative</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer>
+                        <tr>
+                            <td>{{ customer.name }}</td>
+                            <td>{{ customer.country.name }}</td>
+                            <td>{{ customer.company }}</td>
+                            <td>{{ customer.representative.name }}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="paginatorleft">
+                        <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
+                    </ng-template>
+                    <ng-template pTemplate="paginatorright">
+                        <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-paginator-basic-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -53,7 +55,7 @@ export class PaginatorBasicDoc {
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersLarge().then((customers) => {
             this.customers = customers;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/paginatorlocaledoc.ts b/src/app/showcase/doc/table/paginatorlocaledoc.ts
index ead1766b188..b785093f45c 100644
--- a/src/app/showcase/doc/table/paginatorlocaledoc.ts
+++ b/src/app/showcase/doc/table/paginatorlocaledoc.ts
@@ -8,41 +8,43 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>paginator localization information such as page numbers and rows per page options are defined with the <i>paginatorLocale</i> property which defaults to the user locale.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table
-                [value]="customers"
-                [paginator]="true"
-                [rows]="5"
-                [showCurrentPageReport]="true"
-                [tableStyle]="{ 'min-width': '50rem' }"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                [rowsPerPageOptions]="[10, 25, 50]"
-                paginatorLocale="fa-IR"
-            >
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width:25%">Name</th>
-                        <th style="width:25%">Country</th>
-                        <th style="width:25%">Company</th>
-                        <th style="width:25%">Representative</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer>
-                    <tr>
-                        <td>{{ customer.name }}</td>
-                        <td>{{ customer.country.name }}</td>
-                        <td>{{ customer.company }}</td>
-                        <td>{{ customer.representative.name }}</td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="paginatorleft">
-                    <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
-                </ng-template>
-                <ng-template pTemplate="paginatorright">
-                    <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table
+                    [value]="customers"
+                    [paginator]="true"
+                    [rows]="5"
+                    [showCurrentPageReport]="true"
+                    [tableStyle]="{ 'min-width': '50rem' }"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+                    [rowsPerPageOptions]="[10, 25, 50]"
+                    paginatorLocale="fa-IR"
+                >
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width:25%">Name</th>
+                            <th style="width:25%">Country</th>
+                            <th style="width:25%">Company</th>
+                            <th style="width:25%">Representative</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer>
+                        <tr>
+                            <td>{{ customer.name }}</td>
+                            <td>{{ customer.country.name }}</td>
+                            <td>{{ customer.company }}</td>
+                            <td>{{ customer.representative.name }}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="paginatorleft">
+                        <p-button type="button" icon="pi pi-plus" styleClass="p-button-text"></p-button>
+                    </ng-template>
+                    <ng-template pTemplate="paginatorright">
+                        <p-button type="button" icon="pi pi-cloud" styleClass="p-button-text"></p-button>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-paginator-locale-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -51,7 +53,7 @@ export class PaginatorLocaleDoc {
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersLarge().then((customers) => {
             this.customers = customers;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
index 62da8b17cdb..b847b0d003a 100644
--- a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
+++ b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
@@ -9,6 +9,7 @@ import { CustomerService } from '../../service/customerservice';
         <app-docsectiontext>
             <p>Paginator can also be controlled via model using a binding to the <i>first</i> property where changes trigger a pagination.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <div class="mb-3 flex gap-1">
                 <p-button type="button" icon="pi pi-chevron-left" (click)="prev()" [disabled]="isFirstPage()" styleClass="p-button-text"></p-button>
@@ -44,6 +45,7 @@ import { CustomerService } from '../../service/customerservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-paginator-programmatic-demo" [extFiles]="extFiles"></app-code>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -57,7 +59,7 @@ export class PaginatorProgrammaticDoc {
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.customerService.getCustomersLarge().then((customers) => {
             this.customers = customers;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/productsdoc.ts b/src/app/showcase/doc/table/productsdoc.ts
index cf9aa6b96d1..b32ac269184 100644
--- a/src/app/showcase/doc/table/productsdoc.ts
+++ b/src/app/showcase/doc/table/productsdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
@@ -9,152 +9,154 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>CRUD implementation example with a Dialog.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-toast></p-toast>
-            <p-toolbar styleClass="mb-4 gap-2">
-                <ng-template pTemplate="left">
-                    <button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2" (click)="openNew()"></button>
-                    <button pButton pRipple [label]="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
-                </ng-template>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-toast></p-toast>
+                <p-toolbar styleClass="mb-4 gap-2">
+                    <ng-template pTemplate="left">
+                        <button pButton pRipple label="New" icon="pi pi-plus" class="p-button-success mr-2" (click)="openNew()"></button>
+                        <button pButton pRipple [label]="Delete" icon="pi pi-trash" class="p-button-danger" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length"></button>
+                    </ng-template>
+
+                    <ng-template pTemplate="right">
+                        <p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileUpload>
+                        <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help"></button>
+                    </ng-template>
+                </p-toolbar>
+
+                <p-table
+                    #dt
+                    [value]="products"
+                    [rows]="10"
+                    [paginator]="true"
+                    [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
+                    [tableStyle]="{ 'min-width': '75rem' }"
+                    [(selection)]="selectedProducts"
+                    [rowHover]="true"
+                    dataKey="id"
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
+                    [showCurrentPageReport]="true"
+                >
+                    <ng-template pTemplate="caption">
+                        <div class="flex align-items-center justify-content-between">
+                            <h5 class="m-0">Manage Products</h5>
+                            <span class="p-input-icon-left">
+                                <i class="pi pi-search"></i>
+                                <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
+                            </span>
+                        </div>
+                    </ng-template>
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width: 4rem">
+                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
+                            </th>
+                            <th pSortableColumn="name" style="min-width:15rem">Name <p-sortIcon field="name"></p-sortIcon></th>
+                            <th>Image</th>
+                            <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
+                            <th pSortableColumn="category" style="min-width:10rem">Category <p-sortIcon field="category"></p-sortIcon></th>
+                            <th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
+                            <th pSortableColumn="inventoryStatus" style="min-width:10rem">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
+                            <th></th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>
+                                <p-tableCheckbox [value]="product"></p-tableCheckbox>
+                            </td>
+                            <td>{{ product.name }}</td>
+                            <td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="50" class="shadow-4" /></td>
+                            <td>{{ product.price | currency : 'USD' }}</td>
+                            <td>{{ product.category }}</td>
+                            <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
+                            <td>
+                                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+                            </td>
+                            <td>
+                                <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button>
+                                <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(product)"></button>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="summary">
+                        <div class="flex align-items-center justify-content-between">In total there are {{ products ? products.length : 0 }} products.</div>
+                    </ng-template>
+                </p-table>
+
+                <p-dialog [(visible)]="productDialog" [style]="{ width: '450px' }" header="Product Details" [modal]="true" styleClass="p-fluid">
+                    <ng-template pTemplate="content">
+                        <img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.image" class="block m-auto pb-3" *ngIf="product.image" />
+                        <div class="field">
+                            <label for="name">Name</label>
+                            <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
+                            <small class="p-error" *ngIf="submitted && !product.name">Name is required.</small>
+                        </div>
+                        <div class="field">
+                            <label for="description">Description</label>
+                            <textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
+                        </div>
 
-                <ng-template pTemplate="right">
-                    <p-fileUpload mode="basic" accept="image/*" [maxFileSize]="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileUpload>
-                    <button pButton pRipple label="Export" icon="pi pi-upload" class="p-button-help"></button>
-                </ng-template>
-            </p-toolbar>
-
-            <p-table
-                #dt
-                [value]="products"
-                [rows]="10"
-                [paginator]="true"
-                [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']"
-                [tableStyle]="{ 'min-width': '75rem' }"
-                [(selection)]="selectedProducts"
-                [rowHover]="true"
-                dataKey="id"
-                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                [showCurrentPageReport]="true"
-            >
-                <ng-template pTemplate="caption">
-                    <div class="flex align-items-center justify-content-between">
-                        <h5 class="m-0">Manage Products</h5>
-                        <span class="p-input-icon-left">
-                            <i class="pi pi-search"></i>
-                            <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
-                        </span>
-                    </div>
-                </ng-template>
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width: 4rem">
-                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
-                        </th>
-                        <th pSortableColumn="name" style="min-width:15rem">Name <p-sortIcon field="name"></p-sortIcon></th>
-                        <th>Image</th>
-                        <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
-                        <th pSortableColumn="category" style="min-width:10rem">Category <p-sortIcon field="category"></p-sortIcon></th>
-                        <th pSortableColumn="rating">Reviews <p-sortIcon field="rating"></p-sortIcon></th>
-                        <th pSortableColumn="inventoryStatus" style="min-width:10rem">Status <p-sortIcon field="inventoryStatus"></p-sortIcon></th>
-                        <th></th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>
-                            <p-tableCheckbox [value]="product"></p-tableCheckbox>
-                        </td>
-                        <td>{{ product.name }}</td>
-                        <td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="50" class="shadow-4" /></td>
-                        <td>{{ product.price | currency : 'USD' }}</td>
-                        <td>{{ product.category }}</td>
-                        <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
-                        <td>
-                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                        </td>
-                        <td>
-                            <button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" (click)="editProduct(product)"></button>
-                            <button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="deleteProduct(product)"></button>
-                        </td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="summary">
-                    <div class="flex align-items-center justify-content-between">In total there are {{ products ? products.length : 0 }} products.</div>
-                </ng-template>
-            </p-table>
-
-            <p-dialog [(visible)]="productDialog" [style]="{ width: '450px' }" header="Product Details" [modal]="true" styleClass="p-fluid">
-                <ng-template pTemplate="content">
-                    <img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.image" class="block m-auto pb-3" *ngIf="product.image" />
-                    <div class="field">
-                        <label for="name">Name</label>
-                        <input type="text" pInputText id="name" [(ngModel)]="product.name" required autofocus />
-                        <small class="p-error" *ngIf="submitted && !product.name">Name is required.</small>
-                    </div>
-                    <div class="field">
-                        <label for="description">Description</label>
-                        <textarea id="description" pInputTextarea [(ngModel)]="product.description" required rows="3" cols="20"></textarea>
-                    </div>
-
-                    <div class="field">
-                        <label for="inventoryStatus">Inventory Status</label>
-                        <p-dropdown [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" [options]="statuses">
-                            <ng-template pTemplate="selectedItem">
-                                <p-tag [value]="product.inventoryStatus.toUpperCase()" [severity]="getSeverity(product.inventoryStatus.toUpperCase())"></p-tag>
-                            </ng-template>
-                            <ng-template let-option pTemplate="item">
-                                <p-tag [value]="option.label" [severity]="getSeverity(option.label)"></p-tag>
-                            </ng-template>
-                        </p-dropdown>
-                    </div>
-
-                    <div class="field">
-                        <label class="mb-3">Category</label>
-                        <div class="formgrid grid">
-                            <div class="field-radiobutton col-6">
-                                <p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
-                                <label for="category1">Accessories</label>
-                            </div>
-                            <div class="field-radiobutton col-6">
-                                <p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton>
-                                <label for="category2">Clothing</label>
-                            </div>
-                            <div class="field-radiobutton col-6">
-                                <p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton>
-                                <label for="category3">Electronics</label>
-                            </div>
-                            <div class="field-radiobutton col-6">
-                                <p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton>
-                                <label for="category4">Fitness</label>
-                            </div>
+                        <div class="field">
+                            <label for="inventoryStatus">Inventory Status</label>
+                            <p-dropdown [(ngModel)]="product.inventoryStatus" inputId="inventoryStatus" [options]="statuses">
+                                <ng-template pTemplate="selectedItem">
+                                    <p-tag [value]="product.inventoryStatus.toUpperCase()" [severity]="getSeverity(product.inventoryStatus.toUpperCase())"></p-tag>
+                                </ng-template>
+                                <ng-template let-option pTemplate="item">
+                                    <p-tag [value]="option.label" [severity]="getSeverity(option.label)"></p-tag>
+                                </ng-template>
+                            </p-dropdown>
                         </div>
-                    </div>
 
-                    <div class="formgrid grid">
-                        <div class="field col">
-                            <label for="price">Price</label>
-                            <p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
+                        <div class="field">
+                            <label class="mb-3">Category</label>
+                            <div class="formgrid grid">
+                                <div class="field-radiobutton col-6">
+                                    <p-radioButton id="category1" name="category" value="Accessories" [(ngModel)]="product.category"></p-radioButton>
+                                    <label for="category1">Accessories</label>
+                                </div>
+                                <div class="field-radiobutton col-6">
+                                    <p-radioButton id="category2" name="category" value="Clothing" [(ngModel)]="product.category"></p-radioButton>
+                                    <label for="category2">Clothing</label>
+                                </div>
+                                <div class="field-radiobutton col-6">
+                                    <p-radioButton id="category3" name="category" value="Electronics" [(ngModel)]="product.category"></p-radioButton>
+                                    <label for="category3">Electronics</label>
+                                </div>
+                                <div class="field-radiobutton col-6">
+                                    <p-radioButton id="category4" name="category" value="Fitness" [(ngModel)]="product.category"></p-radioButton>
+                                    <label for="category4">Fitness</label>
+                                </div>
+                            </div>
                         </div>
-                        <div class="field col">
-                            <label for="quantity">Quantity</label>
-                            <p-inputNumber id="quantity" [(ngModel)]="product.quantity"></p-inputNumber>
+
+                        <div class="formgrid grid">
+                            <div class="field col">
+                                <label for="price">Price</label>
+                                <p-inputNumber id="price" [(ngModel)]="product.price" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
+                            </div>
+                            <div class="field col">
+                                <label for="quantity">Quantity</label>
+                                <p-inputNumber id="quantity" [(ngModel)]="product.quantity"></p-inputNumber>
+                            </div>
                         </div>
-                    </div>
-                </ng-template>
+                    </ng-template>
 
-                <ng-template pTemplate="footer">
-                    <button pButton pRipple label="Cancel" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"></button>
-                    <button pButton pRipple label="Save" icon="pi pi-check" class="p-button-text" (click)="saveProduct()"></button>
-                </ng-template>
-            </p-dialog>
+                    <ng-template pTemplate="footer">
+                        <button pButton pRipple label="Cancel" icon="pi pi-times" class="p-button-text" (click)="hideDialog()"></button>
+                        <button pButton pRipple label="Save" icon="pi pi-check" class="p-button-text" (click)="saveProduct()"></button>
+                    </ng-template>
+                </p-dialog>
 
-            <p-confirmDialog [style]="{ width: '450px' }"></p-confirmDialog>
-        </div>
+                <p-confirmDialog [style]="{ width: '450px' }"></p-confirmDialog>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-products-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [MessageService, ConfirmationService]
 })
-export class ProductsDoc implements OnInit {
+export class ProductsDoc {
     productDialog: boolean = false;
 
     products!: Product[];
@@ -169,7 +171,7 @@ export class ProductsDoc implements OnInit {
 
     constructor(private productService: ProductService, private messageService: MessageService, private confirmationService: ConfirmationService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProducts().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts
index 9b74b40711a..dccb0b788d8 100644
--- a/src/app/showcase/doc/table/radiobuttonselectiondoc.ts
+++ b/src/app/showcase/doc/table/radiobuttonselectiondoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -8,41 +8,43 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Single selection can also be handled using radio buttons.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width: 4rem"></th>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>
-                            <p-tableRadioButton [value]="product"></p-tableRadioButton>
-                        </td>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width: 4rem"></th>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>
+                                <p-tableRadioButton [value]="product"></p-tableRadioButton>
+                            </td>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-radio-button-selection-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class RadioButtonSelectionDoc implements OnInit {
+export class RadioButtonSelectionDoc {
     products!: Product[];
 
     selectedProduct!: Product;
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/reorderdoc.ts b/src/app/showcase/doc/table/reorderdoc.ts
index 79a8e07760d..9c26405f5c6 100644
--- a/src/app/showcase/doc/table/reorderdoc.ts
+++ b/src/app/showcase/doc/table/reorderdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -17,39 +17,41 @@ interface Column {
                 reorder completes.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [columns]="cols" [reorderableColumns]="true" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header" let-columns>
-                    <tr>
-                        <th style="width:3rem"></th>
-                        <th *ngFor="let col of columns" pReorderableColumn>
-                            {{ col.header }}
-                        </th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
-                    <tr [pReorderableRow]="index">
-                        <td>
-                            <span class="pi pi-bars" pReorderableRowHandle></span>
-                        </td>
-                        <td *ngFor="let col of columns">
-                            {{ rowData[col.field] }}
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [columns]="cols" [reorderableColumns]="true" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header" let-columns>
+                        <tr>
+                            <th style="width:3rem"></th>
+                            <th *ngFor="let col of columns" pReorderableColumn>
+                                {{ col.header }}
+                            </th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-rowData let-columns="columns" let-index="rowIndex">
+                        <tr [pReorderableRow]="index">
+                            <td>
+                                <span class="pi pi-bars" pReorderableRowHandle></span>
+                            </td>
+                            <td *ngFor="let col of columns">
+                                {{ rowData[col.field] }}
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-reorder-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ReorderDoc implements OnInit {
+export class ReorderDoc {
     products!: Product[];
 
     cols!: Column[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsSmall().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/responsivescrolldoc.ts b/src/app/showcase/doc/table/responsivescrolldoc.ts
index 48687abdd63..356b4efee11 100644
--- a/src/app/showcase/doc/table/responsivescrolldoc.ts
+++ b/src/app/showcase/doc/table/responsivescrolldoc.ts
@@ -14,43 +14,45 @@ interface Column {
             <p>When there is not enough space for the table to fit all the content efficiently, table displays a horizontal scrollbar. It is suggested to give a min-width to the table to avoid design issues due wrapping of cell contents.</p>
             <p>Following table displays a horizontal scrollbar when viewport is smaller than 50rem.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header" let-columns>
-                    <tr>
-                        <th>Name</th>
-                        <th>Price</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                        <th>Status</th>
-                        <th>Reviews</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product let-columns="columns">
-                    <tr>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.price | currency : 'USD' }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                        <td>
-                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                        </td>
-                        <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header" let-columns>
+                        <tr>
+                            <th>Name</th>
+                            <th>Price</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                            <th>Status</th>
+                            <th>Reviews</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product let-columns="columns">
+                        <tr>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.price | currency : 'USD' }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                            <td>
+                                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+                            </td>
+                            <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-responsive-scroll-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ResponsiveScrollDoc implements OnInit {
+export class ResponsiveScrollDoc {
     products!: Product[];
 
     cols!: Column[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/responsivestackdoc.ts b/src/app/showcase/doc/table/responsivestackdoc.ts
index e4e4196bd1e..1a0d2dda612 100644
--- a/src/app/showcase/doc/table/responsivestackdoc.ts
+++ b/src/app/showcase/doc/table/responsivestackdoc.ts
@@ -16,41 +16,43 @@ interface Column {
                 <i>p-column-title</i> style class to the body cells.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" responsiveLayout="stack" [breakpoint]="'960px'" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header" let-columns>
-                    <tr>
-                        <th>Name</th>
-                        <th>Price</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                        <th>Status</th>
-                        <th>Reviews</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product let-columns="columns">
-                    <tr>
-                        <td><span class="p-column-title">Name</span>{{ product.name }}</td>
-                        <td><span class="p-column-title">Price</span>{{ product.price | currency : 'USD' }}</td>
-                        <td><span class="p-column-title">Category</span>{{ product.category }}</td>
-                        <td><span class="p-column-title">Quantity</span>{{ product.quantity }}</td>
-                        <td><p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag></td>
-                        <td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" responsiveLayout="stack" [breakpoint]="'960px'" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header" let-columns>
+                        <tr>
+                            <th>Name</th>
+                            <th>Price</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                            <th>Status</th>
+                            <th>Reviews</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product let-columns="columns">
+                        <tr>
+                            <td><span class="p-column-title">Name</span>{{ product.name }}</td>
+                            <td><span class="p-column-title">Price</span>{{ product.price | currency : 'USD' }}</td>
+                            <td><span class="p-column-title">Category</span>{{ product.category }}</td>
+                            <td><span class="p-column-title">Quantity</span>{{ product.quantity }}</td>
+                            <td><p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag></td>
+                            <td><span class="p-column-title">Reviews</span><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-responsive-stack-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class ResponsiveStackDoc implements OnInit {
+export class ResponsiveStackDoc{
     products!: Product[];
 
     cols!: Column[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/roweditdoc.ts b/src/app/showcase/doc/table/roweditdoc.ts
index b61a2e7faa2..82fb996497d 100644
--- a/src/app/showcase/doc/table/roweditdoc.ts
+++ b/src/app/showcase/doc/table/roweditdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { MessageService, SelectItem } from 'primeng/api';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
@@ -21,76 +21,78 @@ import { ProductService } from '../../service/productservice';
                 whose key is the dataKey of the record where the value is any arbitrary number greater than zero.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-toast></p-toast>
-            <p-table [value]="products" dataKey="id" editMode="row" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width:20%">Code</th>
-                        <th style="width:20%">Name</th>
-                        <th style="width:20%">Inventory Status</th>
-                        <th style="width:20%">Price</th>
-                        <th style="width:20%"></th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product let-editing="editing" let-ri="rowIndex">
-                    <tr [pEditableRow]="product">
-                        <td>
-                            <p-cellEditor>
-                                <ng-template pTemplate="input">
-                                    <input pInputText type="text" [(ngModel)]="product.code" />
-                                </ng-template>
-                                <ng-template pTemplate="output">
-                                    {{ product.code }}
-                                </ng-template>
-                            </p-cellEditor>
-                        </td>
-                        <td>
-                            <p-cellEditor>
-                                <ng-template pTemplate="input">
-                                    <input pInputText type="text" [(ngModel)]="product.name" required />
-                                </ng-template>
-                                <ng-template pTemplate="output">
-                                    {{ product.name }}
-                                </ng-template>
-                            </p-cellEditor>
-                        </td>
-                        <td>
-                            <p-cellEditor>
-                                <ng-template pTemplate="input">
-                                    <p-dropdown [options]="statuses" appendTo="body" [(ngModel)]="product.inventoryStatus" [style]="{ width: '100%' }"></p-dropdown>
-                                </ng-template>
-                                <ng-template pTemplate="output">
-                                    {{ product.inventoryStatus }}
-                                </ng-template>
-                            </p-cellEditor>
-                        </td>
-                        <td>
-                            <p-cellEditor>
-                                <ng-template pTemplate="input">
-                                    <input pInputText type="text" [(ngModel)]="product.price" />
-                                </ng-template>
-                                <ng-template pTemplate="output">
-                                    {{ product.price | currency : 'USD' }}
-                                </ng-template>
-                            </p-cellEditor>
-                        </td>
-                        <td>
-                            <div class="flex align-items-center justify-content-center gap-2">
-                                <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button>
-                                <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
-                                <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
-                            </div>
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-toast></p-toast>
+                <p-table [value]="products" dataKey="id" editMode="row" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width:20%">Code</th>
+                            <th style="width:20%">Name</th>
+                            <th style="width:20%">Inventory Status</th>
+                            <th style="width:20%">Price</th>
+                            <th style="width:20%"></th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product let-editing="editing" let-ri="rowIndex">
+                        <tr [pEditableRow]="product">
+                            <td>
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <input pInputText type="text" [(ngModel)]="product.code" />
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{ product.code }}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td>
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <input pInputText type="text" [(ngModel)]="product.name" required />
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{ product.name }}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td>
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <p-dropdown [options]="statuses" appendTo="body" [(ngModel)]="product.inventoryStatus" [style]="{ width: '100%' }"></p-dropdown>
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{ product.inventoryStatus }}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td>
+                                <p-cellEditor>
+                                    <ng-template pTemplate="input">
+                                        <input pInputText type="text" [(ngModel)]="product.price" />
+                                    </ng-template>
+                                    <ng-template pTemplate="output">
+                                        {{ product.price | currency : 'USD' }}
+                                    </ng-template>
+                                </p-cellEditor>
+                            </td>
+                            <td>
+                                <div class="flex align-items-center justify-content-center gap-2">
+                                    <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button>
+                                    <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success mr-2"></button>
+                                    <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
+                                </div>
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-row-edit-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [MessageService]
 })
-export class RowEditDoc implements OnInit {
+export class RowEditDoc {
     products!: Product[];
 
     statuses!: SelectItem[];
@@ -99,7 +101,7 @@ export class RowEditDoc implements OnInit {
 
     constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/rowexpanddoc.ts b/src/app/showcase/doc/table/rowexpanddoc.ts
index 474ef4c3380..2c06eedf5d8 100644
--- a/src/app/showcase/doc/table/rowexpanddoc.ts
+++ b/src/app/showcase/doc/table/rowexpanddoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -12,6 +12,7 @@ import { ProductService } from '../../service/productservice';
                 event for the element.
             </p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table [value]="products" dataKey="name" [tableStyle]="{ 'min-width': '60rem' }">
                 <ng-template pTemplate="header">
@@ -79,15 +80,16 @@ import { ProductService } from '../../service/productservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-row-expand-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class RowExpandDoc implements OnInit {
+export class RowExpandDoc {
     products!: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsWithOrdersSmall().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/rowspangroupingdoc.ts b/src/app/showcase/doc/table/rowspangroupingdoc.ts
index d21d5216966..6a919ca0d2b 100644
--- a/src/app/showcase/doc/table/rowspangroupingdoc.ts
+++ b/src/app/showcase/doc/table/rowspangroupingdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
@@ -8,55 +8,57 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>When <i>rowGroupMode</i> is configured to be <i>rowspan</i>, the grouping column spans multiple rows.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" [tableStyle]="{ 'min-width': '75rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th style="width:3rem">#</th>
-                        <th>Representative</th>
-                        <th>Name</th>
-                        <th>Country</th>
-                        <th>Company</th>
-                        <th>Status</th>
-                        <th>Date</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer let-rowIndex="rowIndex" let-rowgroup="rowgroup" let-rowspan="rowspan">
-                    <tr>
-                        <td>{{ rowIndex }}</td>
-                        <td *ngIf="rowgroup" [attr.rowspan]="rowspan">
-                            <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
-                            <span class="font-bold ml-2">{{ customer.representative.name }}</span>
-                        </td>
-                        <td>
-                            {{ customer.name }}
-                        </td>
-                        <td>
-                            <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
-                            <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
-                        </td>
-                        <td>
-                            {{ customer.company }}
-                        </td>
-                        <td>
-                            <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
-                        </td>
-                        <td>
-                            {{ customer.date }}
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="customers" rowGroupMode="rowspan" groupRowsBy="representative.name" sortField="representative.name" sortMode="single" [tableStyle]="{ 'min-width': '75rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th style="width:3rem">#</th>
+                            <th>Representative</th>
+                            <th>Name</th>
+                            <th>Country</th>
+                            <th>Company</th>
+                            <th>Status</th>
+                            <th>Date</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer let-rowIndex="rowIndex" let-rowgroup="rowgroup" let-rowspan="rowspan">
+                        <tr>
+                            <td>{{ rowIndex }}</td>
+                            <td *ngIf="rowgroup" [attr.rowspan]="rowspan">
+                                <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
+                                <span class="font-bold ml-2">{{ customer.representative.name }}</span>
+                            </td>
+                            <td>
+                                {{ customer.name }}
+                            </td>
+                            <td>
+                                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
+                                <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
+                            </td>
+                            <td>
+                                {{ customer.company }}
+                            </td>
+                            <td>
+                                <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
+                            </td>
+                            <td>
+                                {{ customer.date }}
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-rowspan-grouping-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class RowspanGroupingDoc implements OnInit {
+export class RowspanGroupingDoc {
     customers!: Customer[];
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMedium().then((data) => {
             this.customers = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/selectioneventsdoc.ts b/src/app/showcase/doc/table/selectioneventsdoc.ts
index b24a25a9938..d96ca39eb50 100644
--- a/src/app/showcase/doc/table/selectioneventsdoc.ts
+++ b/src/app/showcase/doc/table/selectioneventsdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
@@ -9,6 +9,7 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Table provides <i>onRowSelect</i> and <i>onRowUnselect</i> events to listen selection events.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-toast></p-toast>
             <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="code" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)" [tableStyle]="{ 'min-width': '50rem' }">
@@ -30,18 +31,19 @@ import { ProductService } from '../../service/productservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-selection-events-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [MessageService]
 })
-export class SelectionEventsDoc implements OnInit {
+export class SelectionEventsDoc {
     products!: Product[];
 
     selectedProduct!: Product;
 
     constructor(private productService: ProductService, private messageService: MessageService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/singlecolumnsortdoc.ts b/src/app/showcase/doc/table/singlecolumnsortdoc.ts
index aabda069fa0..7c89579e650 100644
--- a/src/app/showcase/doc/table/singlecolumnsortdoc.ts
+++ b/src/app/showcase/doc/table/singlecolumnsortdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -12,6 +12,7 @@ import { ProductService } from '../../service/productservice';
             </p>
             <p>Default sorting is executed on a single column, in order to enable multiple field sorting, set <i>sortMode</i> property to "multiple" and use metakey when clicking on another column.</p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table [value]="products" [tableStyle]="{ 'min-width': '60rem' }">
                 <ng-template pTemplate="header">
@@ -34,15 +35,16 @@ import { ProductService } from '../../service/productservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-single-column-sort-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SingleColumnSortDoc implements OnInit {
+export class SingleColumnSortDoc {
     products!: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData(){
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/singleselectiondoc.ts b/src/app/showcase/doc/table/singleselectiondoc.ts
index 170791b622a..ae0e9741aaf 100644
--- a/src/app/showcase/doc/table/singleselectiondoc.ts
+++ b/src/app/showcase/doc/table/singleselectiondoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -15,37 +15,39 @@ import { ProductService } from '../../service/productservice';
                 setting it to false.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr [pSelectableRow]="product">
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" dataKey="code" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr [pSelectableRow]="product">
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-single-selection-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SingleSelectionDoc implements OnInit {
+export class SingleSelectionDoc {
     products!: Product[];
 
     selectedProduct!: Product;
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/sizedoc.ts b/src/app/showcase/doc/table/sizedoc.ts
index f2cf54c2556..b828c9691fa 100644
--- a/src/app/showcase/doc/table/sizedoc.ts
+++ b/src/app/showcase/doc/table/sizedoc.ts
@@ -8,29 +8,31 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
         </app-docsectiontext>
-        <div class="card">
-            <div class="flex justify-content-center mb-3">
-                <p-selectButton [options]="sizes" [(ngModel)]="selectedSize" [multiple]="false" optionLabel="name" optionValue="class"></p-selectButton>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <div class="flex justify-content-center mb-3">
+                    <p-selectButton [options]="sizes" [(ngModel)]="selectedSize" [multiple]="false" optionLabel="name" optionValue="class"></p-selectButton>
+                </div>
+                <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }" [styleClass]="selectedSize">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
             </div>
-            <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }" [styleClass]="selectedSize">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-size-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -43,7 +45,7 @@ export class SizeDoc {
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/statefuldoc.ts b/src/app/showcase/doc/table/statefuldoc.ts
index 8c196c186a4..46ff3de6f62 100644
--- a/src/app/showcase/doc/table/statefuldoc.ts
+++ b/src/app/showcase/doc/table/statefuldoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
@@ -12,6 +12,7 @@ import { CustomerService } from '../../service/customerservice';
                 browser is closed. Other alternative is <i>local</i> referring to <i>localStorage</i> for an extended lifetime.
             </p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table #dt1 [value]="customers" selectionMode="single" [(selection)]="selectedCustomers" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }" [rows]="5" [paginator]="true" stateStorage="session" stateKey="statedemo-session">
                 <ng-template pTemplate="header">
@@ -65,17 +66,18 @@ import { CustomerService } from '../../service/customerservice';
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-stateful-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class StatefulDoc implements OnInit {
+export class StatefulDoc {
     customers!: Customer[];
 
     selectedCustomers!: Customer;
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMini().then((data) => {
             this.customers = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/stripeddoc.ts b/src/app/showcase/doc/table/stripeddoc.ts
index 2bcbb8f7d2e..173dd8b3920 100644
--- a/src/app/showcase/doc/table/stripeddoc.ts
+++ b/src/app/showcase/doc/table/stripeddoc.ts
@@ -8,26 +8,28 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Adding <i>p-datatable-striped</i> class displays striped rows.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" styleClass="p-datatable-striped" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>{{ product.quantity }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" styleClass="p-datatable-striped" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>{{ product.quantity }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-striped-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -36,7 +38,7 @@ export class StripedDoc {
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/styledoc.ts b/src/app/showcase/doc/table/styledoc.ts
index 55cf647938f..8155d893a46 100644
--- a/src/app/showcase/doc/table/styledoc.ts
+++ b/src/app/showcase/doc/table/styledoc.ts
@@ -8,30 +8,32 @@ import { ProductService } from '../../service/productservice';
     template: ` <app-docsectiontext>
             <p>Certain rows or cells can easily be styled based on conditions.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Code</th>
-                        <th>Name</th>
-                        <th>Category</th>
-                        <th>Quantity</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr [ngClass]="{ 'row-accessories': product.category === 'Accessories' }">
-                        <td>{{ product.code }}</td>
-                        <td>{{ product.name }}</td>
-                        <td>{{ product.category }}</td>
-                        <td>
-                            <div [ngClass]="{ outofstock: product.quantity === 0, lowstock: product.quantity > 0 && product.quantity < 10, instock: product.quantity > 10 }">
-                                {{ product.quantity }}
-                            </div>
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Code</th>
+                            <th>Name</th>
+                            <th>Category</th>
+                            <th>Quantity</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr [ngClass]="{ 'row-accessories': product.category === 'Accessories' }">
+                            <td>{{ product.code }}</td>
+                            <td>{{ product.name }}</td>
+                            <td>{{ product.category }}</td>
+                            <td>
+                                <div [ngClass]="{ outofstock: product.quantity === 0, lowstock: product.quantity > 0 && product.quantity < 10, instock: product.quantity > 10 }">
+                                    {{ product.quantity }}
+                                </div>
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-style-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush,
     styles: [
@@ -58,12 +60,12 @@ import { ProductService } from '../../service/productservice';
         `
     ]
 })
-export class StyleDoc implements OnInit {
+export class StyleDoc {
     products!: Product[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/subheadergroupingdoc.ts b/src/app/showcase/doc/table/subheadergroupingdoc.ts
index be2a4dea9dd..72d68b02d64 100644
--- a/src/app/showcase/doc/table/subheadergroupingdoc.ts
+++ b/src/app/showcase/doc/table/subheadergroupingdoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
@@ -11,61 +11,63 @@ import { CustomerService } from '../../service/customerservice';
                 footer with <i>groupfooter</i> templates.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="customers" sortField="representative.name" sortMode="single" [scrollable]="true" scrollHeight="400px" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{ 'min-width': '60rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Name</th>
-                        <th>Country</th>
-                        <th>Company</th>
-                        <th>Status</th>
-                        <th>Date</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="groupheader" let-customer>
-                    <tr pRowGroupHeader>
-                        <td colspan="5">
-                            <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
-                            <span class="font-bold ml-2">{{ customer.representative.name }}</span>
-                        </td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="groupfooter" let-customer>
-                    <tr>
-                        <td colspan="5" class="text-right font-bold pr-6">Total Customers: {{ calculateCustomerTotal(customer.representative.name) }}</td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
-                    <tr>
-                        <td>
-                            {{ customer.name }}
-                        </td>
-                        <td>
-                            <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
-                            <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
-                        </td>
-                        <td>
-                            {{ customer.company }}
-                        </td>
-                        <td>
-                            <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
-                        </td>
-                        <td>
-                            {{ customer.date }}
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="customers" sortField="representative.name" sortMode="single" [scrollable]="true" scrollHeight="400px" rowGroupMode="subheader" groupRowsBy="representative.name" [tableStyle]="{ 'min-width': '60rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Name</th>
+                            <th>Country</th>
+                            <th>Company</th>
+                            <th>Status</th>
+                            <th>Date</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="groupheader" let-customer>
+                        <tr pRowGroupHeader>
+                            <td colspan="5">
+                                <img [alt]="customer.representative.name" src="https://primefaces.org/cdn/primeng/images/demo/avatar/{{ customer.representative.image }}" width="32" style="vertical-align: middle" />
+                                <span class="font-bold ml-2">{{ customer.representative.name }}</span>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="groupfooter" let-customer>
+                        <tr>
+                            <td colspan="5" class="text-right font-bold pr-6">Total Customers: {{ calculateCustomerTotal(customer.representative.name) }}</td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer let-rowIndex="rowIndex">
+                        <tr>
+                            <td>
+                                {{ customer.name }}
+                            </td>
+                            <td>
+                                <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" style="width: 20px" />
+                                <span class="ml-1 vertical-align-middle">{{ customer.country.name }}</span>
+                            </td>
+                            <td>
+                                {{ customer.company }}
+                            </td>
+                            <td>
+                                <p-tag [value]="customer.status" [severity]="getSeverity(customer.status)"></p-tag>
+                            </td>
+                            <td>
+                                {{ customer.date }}
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-subheader-grouping-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class SubheaderGroupingDoc implements OnInit {
+export class SubheaderGroupingDoc {
     customers!: Customer[];
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMedium().then((data) => {
             this.customers = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/tabledoc.module.ts b/src/app/showcase/doc/table/tabledoc.module.ts
index 2f8439f32f0..5bc4c656249 100644
--- a/src/app/showcase/doc/table/tabledoc.module.ts
+++ b/src/app/showcase/doc/table/tabledoc.module.ts
@@ -81,6 +81,7 @@ import { StylingDoc } from './stylingdoc';
 import { SelectionEventsDoc } from './selectioneventsdoc';
 import { AccessibilityDoc } from './accessibilitydoc';
 import { PaginatorLocaleDoc } from './paginatorlocaledoc';
+import { DeferredDemo } from '../../demo/deferreddemo';
 
 @NgModule({
     imports: [
@@ -112,7 +113,8 @@ import { PaginatorLocaleDoc } from './paginatorlocaledoc';
         SkeletonModule,
         SelectButtonModule,
         AppCodeModule,
-        AppDocModule
+        AppDocModule,
+        DeferredDemo
     ],
     declarations: [
         ImportDoc,
diff --git a/src/app/showcase/doc/table/templatedoc.ts b/src/app/showcase/doc/table/templatedoc.ts
index eb84559c35a..8200e98ad42 100644
--- a/src/app/showcase/doc/table/templatedoc.ts
+++ b/src/app/showcase/doc/table/templatedoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Product } from '../../domain/product';
 import { ProductService } from '../../service/productservice';
@@ -13,52 +13,54 @@ interface Column {
     template: ` <app-docsectiontext>
             <p>Custom content at <i>header</i>, <i>body</i> and <i>footer</i> sections are supported via templating.</p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [value]="products" [tableStyle]="{ 'min-width': '60rem' }">
-                <ng-template pTemplate="caption">
-                    <div class="flex align-items-center justify-content-between">
-                        Products
-                        <p-button icon="pi pi-refresh"></p-button>
-                    </div>
-                </ng-template>
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Name</th>
-                        <th>Image</th>
-                        <th>Price</th>
-                        <th>Category</th>
-                        <th>Reviews</th>
-                        <th>Status</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-product>
-                    <tr>
-                        <td>{{ product.name }}</td>
-                        <td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
-                        <td>{{ product.price | currency : 'USD' }}</td>
-                        <td>{{ product.category }}</td>
-                        <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
-                        <td>
-                            <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
-                        </td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="summary">
-                    <div class="flex align-items-center justify-content-between">In total there are {{ products ? products.length : 0 }} products.</div>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="products" [tableStyle]="{ 'min-width': '60rem' }">
+                    <ng-template pTemplate="caption">
+                        <div class="flex align-items-center justify-content-between">
+                            Products
+                            <p-button icon="pi pi-refresh"></p-button>
+                        </div>
+                    </ng-template>
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Name</th>
+                            <th>Image</th>
+                            <th>Price</th>
+                            <th>Category</th>
+                            <th>Reviews</th>
+                            <th>Status</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-product>
+                        <tr>
+                            <td>{{ product.name }}</td>
+                            <td><img [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + product.image" [alt]="product.name" width="100" class="shadow-4" /></td>
+                            <td>{{ product.price | currency : 'USD' }}</td>
+                            <td>{{ product.category }}</td>
+                            <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
+                            <td>
+                                <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)"></p-tag>
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="summary">
+                        <div class="flex align-items-center justify-content-between">In total there are {{ products ? products.length : 0 }} products.</div>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-template-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TemplateDoc implements OnInit {
+export class TemplateDoc {
     products!: Product[];
 
     cols!: Column[];
 
     constructor(private productService: ProductService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.productService.getProductsMini().then((data) => {
             this.products = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/verticalscrolldoc.ts b/src/app/showcase/doc/table/verticalscrolldoc.ts
index 263b50de847..58659e26fa0 100644
--- a/src/app/showcase/doc/table/verticalscrolldoc.ts
+++ b/src/app/showcase/doc/table/verticalscrolldoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
 import { Code } from '../../domain/code';
 import { Customer } from '../../domain/customer';
 import { CustomerService } from '../../service/customerservice';
@@ -8,35 +8,37 @@ import { CustomerService } from '../../service/customerservice';
     template: ` <app-docsectiontext>
             <p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p></app-docsectiontext
         >
-        <div class="card">
-            <p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{ 'min-width': '50rem' }">
-                <ng-template pTemplate="header">
-                    <tr>
-                        <th>Name</th>
-                        <th>Country</th>
-                        <th>Company</th>
-                        <th>Representative</th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-customer>
-                    <tr>
-                        <td>{{ customer.name }}</td>
-                        <td>{{ customer.country.name }}</td>
-                        <td>{{ customer.company }}</td>
-                        <td>{{ customer.representative.name }}</td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [value]="customers" [scrollable]="true" scrollHeight="400px" [tableStyle]="{ 'min-width': '50rem' }">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Name</th>
+                            <th>Country</th>
+                            <th>Company</th>
+                            <th>Representative</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-customer>
+                        <tr>
+                            <td>{{ customer.name }}</td>
+                            <td>{{ customer.country.name }}</td>
+                            <td>{{ customer.company }}</td>
+                            <td>{{ customer.representative.name }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-vertical-scroll-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class VerticalScrollDoc implements OnInit {
+export class VerticalScrollDoc {
     customers!: Customer[];
 
     constructor(private customerService: CustomerService, private cd: ChangeDetectorRef) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.customerService.getCustomersMedium().then((data) => {
             this.customers = data;
             this.cd.markForCheck();
diff --git a/src/app/showcase/doc/table/virtualscrolldoc.ts b/src/app/showcase/doc/table/virtualscrolldoc.ts
index 495559cc579..3bbb1c6f04c 100644
--- a/src/app/showcase/doc/table/virtualscrolldoc.ts
+++ b/src/app/showcase/doc/table/virtualscrolldoc.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Car } from '../../domain/car';
 import { Code } from '../../domain/code';
 import { CarService } from '../../service/carservice';
@@ -16,6 +16,7 @@ interface Column {
                 suggested to use the same <i>virtualScrollItemSize</i> value on the tr element inside the body template.
             </p>
         </app-docsectiontext>
+        <p-deferred-demo (load)="loadDemoData()">
         <div class="card">
             <p-table [columns]="cols" [value]="cars" [scrollable]="true" scrollHeight="250px" [virtualScroll]="true" [virtualScrollItemSize]="46">
                 <ng-template pTemplate="header" let-columns>
@@ -34,10 +35,11 @@ interface Column {
                 </ng-template>
             </p-table>
         </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-virtual-scroll-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class VirtualScrollDoc implements OnInit {
+export class VirtualScrollDoc {
     cars!: Car[];
 
     virtualCars!: Car[];
@@ -46,7 +48,7 @@ export class VirtualScrollDoc implements OnInit {
 
     constructor(private carService: CarService) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.cols = [
             { field: 'id', header: 'Id' },
             { field: 'vin', header: 'Vin' },
diff --git a/src/app/showcase/doc/table/virtualscrolllazydoc.ts b/src/app/showcase/doc/table/virtualscrolllazydoc.ts
index 7fdc9c34a56..e24c8847528 100644
--- a/src/app/showcase/doc/table/virtualscrolllazydoc.ts
+++ b/src/app/showcase/doc/table/virtualscrolllazydoc.ts
@@ -17,35 +17,37 @@ interface Column {
                 suggested to use the same <i>virtualScrollItemSize</i> value on the tr element inside the body template.
             </p>
         </app-docsectiontext>
-        <div class="card">
-            <p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" scrollHeight="250px" [rows]="100" [virtualScroll]="true" [virtualScrollItemSize]="46" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
-                <ng-template pTemplate="header" let-columns>
-                    <tr>
-                        <th *ngFor="let col of columns" style="width: 20%;">
-                            {{ col.header }}
-                        </th>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="body" let-rowData let-columns="columns">
-                    <tr style="height:46px">
-                        <td *ngFor="let col of columns">
-                            {{ rowData[col.field] }}
-                        </td>
-                    </tr>
-                </ng-template>
-                <ng-template pTemplate="loadingbody" let-columns="columns">
-                    <tr style="height:46px">
-                        <td *ngFor="let col of columns; let even = even">
-                            <p-skeleton [ngStyle]="{ width: even ? (col.field === 'year' ? '30%' : '40%') : '60%' }"></p-skeleton>
-                        </td>
-                    </tr>
-                </ng-template>
-            </p-table>
-        </div>
+        <p-deferred-demo (load)="loadDemoData()">
+            <div class="card">
+                <p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" scrollHeight="250px" [rows]="100" [virtualScroll]="true" [virtualScrollItemSize]="46" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
+                    <ng-template pTemplate="header" let-columns>
+                        <tr>
+                            <th *ngFor="let col of columns" style="width: 20%;">
+                                {{ col.header }}
+                            </th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-rowData let-columns="columns">
+                        <tr style="height:46px">
+                            <td *ngFor="let col of columns">
+                                {{ rowData[col.field] }}
+                            </td>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="loadingbody" let-columns="columns">
+                        <tr style="height:46px">
+                            <td *ngFor="let col of columns; let even = even">
+                                <p-skeleton [ngStyle]="{ width: even ? (col.field === 'year' ? '30%' : '40%') : '60%' }"></p-skeleton>
+                            </td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+            </div>
+        </p-deferred-demo>
         <app-code [code]="code" selector="table-virtual-scroll-lazy-demo" [extFiles]="extFiles"></app-code>`,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class VirtualScrollLazyDoc implements OnInit {
+export class VirtualScrollLazyDoc {
     cars!: Car[];
 
     virtualCars!: Car[];
@@ -54,7 +56,7 @@ export class VirtualScrollLazyDoc implements OnInit {
 
     constructor(private carService: CarService) {}
 
-    ngOnInit() {
+    loadDemoData() {
         this.cols = [
             { field: 'id', header: 'Id' },
             { field: 'vin', header: 'Vin' },
diff --git a/src/app/showcase/domain/appconfig.ts b/src/app/showcase/domain/appconfig.ts
index 8e1e7e05afd..1e998ebd93f 100644
--- a/src/app/showcase/domain/appconfig.ts
+++ b/src/app/showcase/domain/appconfig.ts
@@ -3,4 +3,6 @@ export interface AppConfig {
     darkMode?: boolean;
     theme?: string;
     ripple?: boolean;
+    scale?: number;
+    tableTheme?: string;
 }
diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts
index 1b9854e45f2..0e82afa168e 100644
--- a/src/app/showcase/layout/app.component.ts
+++ b/src/app/showcase/layout/app.component.ts
@@ -1,6 +1,6 @@
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
-import { Component, Inject, OnDestroy, OnInit, Renderer2, afterNextRender } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2, afterNextRender } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { PrimeNGConfig } from 'primeng/api';
@@ -21,6 +21,7 @@ import { AppConfigComponent } from './config/app.config.component';
 import { AppMenuComponent } from './menu/app.menu.component';
 import { AppNewsComponent } from './news/app.news.component';
 import { AppTopBarComponent } from './topbar/app.topbar.component';
+import { AppConfig } from '../domain/appconfig';
 
 @Component({
     selector: 'app-root',
@@ -29,8 +30,8 @@ import { AppTopBarComponent } from './topbar/app.topbar.component';
     imports: [RouterOutlet, FormsModule, ReactiveFormsModule, HttpClientModule, AppMainComponent, LandingComponent, AppNewsComponent, AppConfigComponent, AppTopBarComponent, AppMenuComponent],
     providers: [CarService, CountryService, EventService, NodeService, IconService, CustomerService, PhotoService, AppConfigService, ProductService]
 })
-export class AppComponent implements OnInit, OnDestroy {
-    constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router) {
+export class AppComponent implements OnInit {
+    constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, private primeng: PrimeNGConfig, private configService: AppConfigService, private router: Router, @Inject(PLATFORM_ID) private platformId: any) {
         afterNextRender(() => {
             if (process.env.NODE_ENV === 'production') {
                 this.injectScripts();
@@ -40,14 +41,20 @@ export class AppComponent implements OnInit, OnDestroy {
         });
     }
 
-    themeChangeSubscription: Subscription;
-
-    ngOnInit() {
+    ngOnInit(): void {
         this.primeng.ripple = true;
+        if (isPlatformBrowser(this.platformId)) {
+            this.checkAppState();
+        }
+    }
 
-        this.themeChangeSubscription = this.configService.themeChange$.subscribe((theme: Theme) => {
-            this.switchTheme(theme);
-        });
+    checkAppState() {
+        const stored = localStorage.getItem('layout-config');
+        let _config!: AppConfig;
+        if (stored) {
+            _config = JSON.parse(stored) as AppConfig;
+            this.configService.config.set(_config);
+        }
     }
 
     injectScripts() {
@@ -77,39 +84,12 @@ export class AppComponent implements OnInit, OnDestroy {
                     });
                 }
 
-                const { theme, darkMode } = this.configService.config;
+                const { theme, darkMode } = this.configService.config();
                 const landingTheme = darkMode ? 'lara-dark-blue' : 'lara-light-blue';
                 if (event.urlAfterRedirects === '/' && theme !== landingTheme) {
-                    this.switchTheme({ name: landingTheme, dark: darkMode });
+                    this.configService.config.update((config) => ({ ...config, theme: landingTheme, dark: darkMode }));
                 }
             }
         });
     }
-
-    switchTheme(theme: Theme) {
-        const id = 'theme-link';
-        const linkElement = <HTMLLinkElement>this.document.getElementById(id);
-        const cloneLinkElement = <HTMLLinkElement>linkElement.cloneNode(true);
-
-        cloneLinkElement.setAttribute('href', linkElement.getAttribute('href').replace(this.configService.config.theme, theme.name));
-        cloneLinkElement.setAttribute('id', id + '-clone');
-
-        linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
-
-        cloneLinkElement.addEventListener('load', () => {
-            linkElement.remove();
-            cloneLinkElement.setAttribute('id', id);
-            this.configService.updateConfig({
-                theme: theme.name,
-                darkMode: theme.dark
-            });
-            this.configService.completeThemeChange(theme);
-        });
-    }
-
-    ngOnDestroy() {
-        if (this.themeChangeSubscription) {
-            this.themeChangeSubscription.unsubscribe();
-        }
-    }
 }
diff --git a/src/app/showcase/layout/app.main.component.ts b/src/app/showcase/layout/app.main.component.ts
index 8f763bf77bc..36387dd142b 100644
--- a/src/app/showcase/layout/app.main.component.ts
+++ b/src/app/showcase/layout/app.main.component.ts
@@ -37,15 +37,15 @@ export class AppMainComponent {
     }
 
     get isInputFilled(): boolean {
-        return this.configService.config.inputStyle === 'filled';
+        return this.configService.config().inputStyle === 'filled';
     }
 
     get isDarkMode(): boolean {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 
     get isRippleDisabled(): boolean {
-        return this.configService.config.ripple === false;
+        return this.configService.config().ripple === false;
     }
 
     get isMenuActive(): boolean {
@@ -53,7 +53,7 @@ export class AppMainComponent {
     }
 
     get theme(): string {
-        return this.configService.config.theme;
+        return this.configService.config().theme;
     }
 
     get containerClass() {
@@ -68,7 +68,7 @@ export class AppMainComponent {
 
     toggleDarkMode() {
         let newTheme = null;
-        const { theme, darkMode } = this.configService.config;
+        const { theme, darkMode } = this.configService.config();
 
         if (darkMode) {
             newTheme = theme.replace('dark', 'light');
@@ -76,8 +76,7 @@ export class AppMainComponent {
             if (theme.includes('light') && theme !== 'fluent-light') newTheme = theme.replace('light', 'dark');
             else newTheme = 'lara-dark-blue';
         }
-
-        this.configService.changeTheme({ name: newTheme, dark: !darkMode });
+        this.configService.config.update((config) => ({ ...config, darkMode: !darkMode, theme: newTheme }));
     }
 
     hideMenu() {
diff --git a/src/app/showcase/layout/config/app.config.component.ts b/src/app/showcase/layout/config/app.config.component.ts
index cc664fd77f5..6345016f6b3 100644
--- a/src/app/showcase/layout/config/app.config.component.ts
+++ b/src/app/showcase/layout/config/app.config.component.ts
@@ -15,7 +15,6 @@ import { AppConfigService } from '../../service/appconfigservice';
     imports: [CommonModule, FormsModule, SidebarModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButtonModule]
 })
 export class AppConfigComponent {
-    scale: number = 14;
     inputStyles = [
         { label: 'Outlined', value: 'outlined' },
         { label: 'Filled', value: 'filled' }
@@ -35,19 +34,32 @@ export class AppConfigComponent {
     }
 
     get isDarkToggleDisabled(): boolean {
-        return this.lightOnlyThemes.includes(this.configService.config.theme);
+        return this.lightOnlyThemes.includes(this.configService.config().theme);
     }
 
     get isDarkMode(): boolean {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 
     get inputStyle(): string {
-        return this.configService.config.inputStyle;
+        return this.configService.config().inputStyle;
+    }
+    set inputStyle(val: string) {
+        this.configService.config.update((config) => ({ ...config, inputStyle: val }));
     }
 
     get ripple(): boolean {
-        return this.configService.config.ripple;
+        return this.configService.config().ripple;
+    }
+    set ripple(val: boolean) {
+        this.configService.config.update((config) => ({ ...config, ripple: val }));
+    }
+
+    get scale(): number {
+        return this.configService.config().scale;
+    }
+    set scale(val: number) {
+        this.configService.config.update((config) => ({ ...config, scale: val }));
     }
 
     onVisibleChange(value: boolean) {
@@ -57,7 +69,7 @@ export class AppConfigComponent {
     }
 
     onCompactMaterialChange() {
-        const theme = this.configService.config.theme;
+        const theme = this.configService.config().theme;
         if (theme.startsWith('md')) {
             let tokens = theme.split('-');
 
@@ -83,7 +95,7 @@ export class AppConfigComponent {
             themeName += '-' + color;
         }
 
-        return this.configService.config.theme === themeName;
+        return this.configService.config().theme === themeName;
     }
 
     changeTheme(theme: string, color?: string) {
@@ -106,28 +118,22 @@ export class AppConfigComponent {
             darkMode = this.isDarkMode;
         }
 
-        this.configService.changeTheme({ name: newTheme, dark: darkMode });
+        this.configService.config.update((config) => ({ ...config, dark: darkMode, theme: newTheme }));
     }
 
-    onInputStyleChange(event: SelectButtonChangeEvent) {
-        this.configService.setInputStyle(event.value);
+    decrementScale() {
+        this.scale--;
     }
 
-    onRippleChange(event: InputSwitchChangeEvent) {
-        this.configService.setRipple(event.checked);
+    onRippleChange(event) {
+        this.ripple = event.checked;
     }
 
-    decrementScale() {
-        this.scale--;
-        this.applyScale();
+    onInputStyleChange(event) {
+        this.inputStyle = event.value;
     }
 
     incrementScale() {
         this.scale++;
-        this.applyScale();
-    }
-
-    applyScale() {
-        this.renderer.setStyle(this.document.documentElement, 'font-size', this.scale + 'px');
     }
 }
diff --git a/src/app/showcase/layout/doc/app.docapitable.component.ts b/src/app/showcase/layout/doc/app.docapitable.component.ts
index b78b4151229..4ff25bb7616 100644
--- a/src/app/showcase/layout/doc/app.docapitable.component.ts
+++ b/src/app/showcase/layout/doc/app.docapitable.component.ts
@@ -109,7 +109,7 @@ export class AppDocApiTable {
     constructor(public viewContainerRef: ViewContainerRef, public router: Router, public location: Location, private configService: AppConfigService) {}
 
     get isDarkMode(): boolean {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 
     navigate(event, param) {
diff --git a/src/app/showcase/layout/topbar/app.topbar.component.ts b/src/app/showcase/layout/topbar/app.topbar.component.ts
index 7e0d546b041..e993e36cca1 100644
--- a/src/app/showcase/layout/topbar/app.topbar.component.ts
+++ b/src/app/showcase/layout/topbar/app.topbar.component.ts
@@ -37,7 +37,7 @@ export class AppTopBarComponent implements OnDestroy {
     }
 
     get isDarkMode() {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 
     toggleMenu() {
diff --git a/src/app/showcase/pages/landing/featuressection.component.ts b/src/app/showcase/pages/landing/featuressection.component.ts
index d2b2081c500..a402299fa95 100644
--- a/src/app/showcase/pages/landing/featuressection.component.ts
+++ b/src/app/showcase/pages/landing/featuressection.component.ts
@@ -79,6 +79,6 @@ export class FeaturesSectionComponent {
     constructor(private configService: AppConfigService) {}
 
     get isDarkMode() {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 }
diff --git a/src/app/showcase/pages/landing/herosection.component.ts b/src/app/showcase/pages/landing/herosection.component.ts
index 0816ef1d881..0831ab4805e 100644
--- a/src/app/showcase/pages/landing/herosection.component.ts
+++ b/src/app/showcase/pages/landing/herosection.component.ts
@@ -14,7 +14,7 @@ import { RadioButtonModule } from 'primeng/radiobutton';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { SliderModule } from 'primeng/slider';
 import { TabMenuModule } from 'primeng/tabmenu';
-import { Subscription } from 'rxjs';
+import { Subscription, debounceTime } from 'rxjs';
 import { AppConfigService } from '../../service/appconfigservice';
 
 @Component({
@@ -173,7 +173,7 @@ export class HeroSectionComponent implements OnInit, OnDestroy {
 
     rangeValues = [20, 80];
 
-    themeChangeCompleteSubscription: Subscription;
+    subscription!: Subscription;
 
     constructor(private configService: AppConfigService, @Inject(PLATFORM_ID) private platformId: any) {}
 
@@ -199,7 +199,7 @@ export class HeroSectionComponent implements OnInit, OnDestroy {
             { name: 'Onyama Limba', image: 'onyamalimba.png' }
         ];
 
-        this.themeChangeCompleteSubscription = this.configService.themeChangeComplete$.subscribe(() => {
+        this.subscription = this.configService.configUpdate$.pipe(debounceTime(25)).subscribe((config) => {
             this.setChartOptions();
         });
     }
@@ -258,9 +258,9 @@ export class HeroSectionComponent implements OnInit, OnDestroy {
     }
 
     ngOnDestroy(): void {
-        if (this.themeChangeCompleteSubscription) {
-            this.themeChangeCompleteSubscription.unsubscribe();
-            this.themeChangeCompleteSubscription = null;
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
         }
     }
 }
diff --git a/src/app/showcase/pages/landing/landing.component.ts b/src/app/showcase/pages/landing/landing.component.ts
index 3141567de0f..c17234f4901 100644
--- a/src/app/showcase/pages/landing/landing.component.ts
+++ b/src/app/showcase/pages/landing/landing.component.ts
@@ -11,6 +11,7 @@ import { HeroSectionComponent } from './herosection.component';
 import { TemplateSectionComponent } from './templatesection.component';
 import { ThemeSectionComponent } from './themesection.component';
 import { UsersSectionComponent } from './userssection.component';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'landing',
@@ -19,16 +20,14 @@ import { UsersSectionComponent } from './userssection.component';
     imports: [CommonModule, NgOptimizedImage, AppNewsComponent, AppTopBarComponent, HeroSectionComponent, FeaturesSectionComponent, UsersSectionComponent, ThemeSectionComponent, BlockSectionComponent, TemplateSectionComponent, FooterSectionComponent]
 })
 export class LandingComponent implements OnInit {
-    private tableTheme = 'lara-light-blue';
-
-    constructor(private configService: AppConfigService, private metaService: Meta, private titleService: Title) {
-        afterNextRender(() => {
-            if (this.configService.config.theme !== this.tableTheme) {
-                this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue');
-            }
-        });
+    get tableTheme() {
+        return this.configService.config().tableTheme;
     }
 
+    subscription!: Subscription;
+
+    constructor(private configService: AppConfigService, private metaService: Meta, private titleService: Title) {}
+
     get landingClass() {
         return {
             'layout-dark': this.isDarkMode,
@@ -38,7 +37,7 @@ export class LandingComponent implements OnInit {
     }
 
     get isDarkMode() {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 
     get isNewsActive() {
@@ -51,37 +50,8 @@ export class LandingComponent implements OnInit {
     }
 
     toggleDarkMode() {
-        const theme = this.isDarkMode ? 'lara-light-blue' : 'lara-dark-blue';
-        const newTableTheme = this.isDarkMode ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
-
-        this.configService.changeTheme({ name: theme, dark: !this.isDarkMode });
-        this.replaceTableTheme(newTableTheme);
-    }
-
-    changeTableTheme(value: string) {
-        this.replaceTableTheme(value);
-    }
-
-    replaceTableTheme(newTheme: string) {
-        const elementId = 'home-table-link';
-        const linkElement = <HTMLLinkElement>document.getElementById(elementId);
-        const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null;
-        const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null;
-
-        if (currentTableTheme !== newTheme && tableThemeTokens) {
-            const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme);
-
-            const cloneLinkElement = <HTMLLinkElement>linkElement.cloneNode(true);
-
-            cloneLinkElement.setAttribute('id', elementId + '-clone');
-            cloneLinkElement.setAttribute('href', newThemeUrl);
-            cloneLinkElement.addEventListener('load', () => {
-                linkElement.remove();
-                cloneLinkElement.setAttribute('id', elementId);
-            });
-            linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
-
-            this.tableTheme = newTheme;
-        }
+        const dark = !this.isDarkMode;
+        const newTableTheme = !dark ? this.tableTheme.replace('dark', 'light') : this.tableTheme.replace('light', 'dark');
+        this.configService.config.update((config) => ({ ...config, darkMode: dark, theme: dark ? 'lara-dark-blue' : 'lara-light-blue', tableTheme: newTableTheme }));
     }
 }
diff --git a/src/app/showcase/pages/landing/templatesection.component.ts b/src/app/showcase/pages/landing/templatesection.component.ts
index f343223938f..abae8c2a40a 100644
--- a/src/app/showcase/pages/landing/templatesection.component.ts
+++ b/src/app/showcase/pages/landing/templatesection.component.ts
@@ -140,6 +140,6 @@ export class TemplateSectionComponent {
     constructor(private configService: AppConfigService) {}
 
     get isDarkMode() {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 }
diff --git a/src/app/showcase/pages/landing/themesection.component.ts b/src/app/showcase/pages/landing/themesection.component.ts
index 3ac215894bd..85439bfe67f 100644
--- a/src/app/showcase/pages/landing/themesection.component.ts
+++ b/src/app/showcase/pages/landing/themesection.component.ts
@@ -8,6 +8,7 @@ import { Customer } from '../../domain/customer';
 import { AppComponent } from '../../layout/app.component';
 import { AppConfigService } from '../../service/appconfigservice';
 import { CustomerService } from '../../service/customerservice';
+import { Subscription } from 'rxjs';
 
 @Component({
     selector: 'theme-section',
@@ -161,7 +162,12 @@ export class ThemeSectionComponent {
 
     @ViewChild('dt') table: Table;
 
-    tableTheme: string = 'lara-light-blue';
+    get tableTheme() {
+        return this.configService.config().tableTheme;
+    }
+    set tableTheme(value: string) {
+        this.configService.config.update((config) => ({ ...config, tableTheme: value }));
+    }
 
     customers: Customer[];
 
@@ -170,46 +176,20 @@ export class ThemeSectionComponent {
     loading: boolean = true;
 
     get isDarkMode() {
-        return this.configService.config.darkMode;
-    }
-
-    changeTableTheme(value: string) {
-        if (isPlatformBrowser(this.platformId)) {
-            this.replaceTableTheme(value);
-        }
-    }
-    replaceTableTheme(newTheme: string) {
-        const elementId = 'home-table-link';
-        const linkElement = <HTMLLinkElement>document.getElementById(elementId);
-        const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null;
-        const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null;
-
-        if (currentTableTheme !== newTheme && tableThemeTokens) {
-            const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme);
-
-            const cloneLinkElement = <HTMLLinkElement>linkElement.cloneNode(true);
-
-            cloneLinkElement.setAttribute('id', elementId + '-clone');
-            cloneLinkElement.setAttribute('href', newThemeUrl);
-            cloneLinkElement.addEventListener('load', () => {
-                linkElement.remove();
-                cloneLinkElement.setAttribute('id', elementId);
-            });
-            linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
-
-            this.tableTheme = newTheme;
-        }
+        return this.configService.config().darkMode;
     }
 
     ngOnInit() {
-        this.changeTableTheme(this.configService.config.darkMode ? 'lara-dark-blue' : 'lara-light-blue');
-
         this.customerService.getCustomersLarge().then((customers) => {
             this.customers = customers;
             this.loading = false;
         });
     }
 
+    changeTableTheme(value: string) {
+        this.tableTheme = value;
+    }
+
     getSeverity(status) {
         switch (status) {
             case 'unqualified':
diff --git a/src/app/showcase/pages/landing/userssection.component.ts b/src/app/showcase/pages/landing/userssection.component.ts
index fbb12681159..6eddb660048 100644
--- a/src/app/showcase/pages/landing/userssection.component.ts
+++ b/src/app/showcase/pages/landing/userssection.component.ts
@@ -76,6 +76,6 @@ export class UsersSectionComponent {
     ];
 
     get isDarkMode() {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 }
diff --git a/src/app/showcase/pages/uikit/uikit.component.ts b/src/app/showcase/pages/uikit/uikit.component.ts
index 06140bd962a..3e73387cd4e 100755
--- a/src/app/showcase/pages/uikit/uikit.component.ts
+++ b/src/app/showcase/pages/uikit/uikit.component.ts
@@ -15,6 +15,6 @@ export class UIKitComponent {
     }
 
     get isDarkMode(): boolean {
-        return this.configService.config.darkMode;
+        return this.configService.config().darkMode;
     }
 }
diff --git a/src/app/showcase/service/appconfigservice.ts b/src/app/showcase/service/appconfigservice.ts
index a05b72e40f5..1047c696b9c 100644
--- a/src/app/showcase/service/appconfigservice.ts
+++ b/src/app/showcase/service/appconfigservice.ts
@@ -1,18 +1,20 @@
-import { Injectable } from '@angular/core';
+import { Inject, Injectable, PLATFORM_ID, effect, signal } from '@angular/core';
 import { Subject } from 'rxjs';
 import { AppConfig } from '../domain/appconfig';
 import { AppState } from '../domain/appstate';
-import { Theme } from '../domain/theme';
+import { isPlatformBrowser } from '@angular/common';
 
 @Injectable({
     providedIn: 'root'
 })
 export class AppConfigService {
-    config: AppConfig = {
+    _config: AppConfig = {
         theme: 'lara-light-blue',
         darkMode: false,
         inputStyle: 'outlined',
-        ripple: true
+        ripple: true,
+        scale: 14,
+        tableTheme: 'lara-light-blue'
     };
 
     state: AppState = {
@@ -21,28 +23,37 @@ export class AppConfigService {
         newsActive: false
     };
 
-    private themeChange = new Subject<Theme>();
-
-    themeChange$ = this.themeChange.asObservable();
-
-    private themeChangeComplete = new Subject<Theme>();
-
-    themeChangeComplete$ = this.themeChangeComplete.asObservable();
-
-    changeTheme(theme: Theme) {
-        this.themeChange.next(theme);
-    }
-
-    completeThemeChange(theme: Theme) {
-        this.themeChangeComplete.next(theme);
+    config = signal<AppConfig>(this._config);
+
+    private configUpdate = new Subject<AppConfig>();
+
+    configUpdate$ = this.configUpdate.asObservable();
+
+    constructor(@Inject(PLATFORM_ID) private platformId: any) {
+        effect(() => {
+            const config = this.config();
+            if (isPlatformBrowser(this.platformId)) {
+                if (this.updateStyle(config)) {
+                    this.changeTheme();
+                    const newTableTheme = !config.darkMode ? config.tableTheme.replace('dark', 'light') : config.tableTheme.replace('light', 'dark');
+                    this.replaceTableTheme(newTableTheme);
+                }
+                this.changeScale(config.scale);
+                this.onConfigUpdate();
+            }
+        });
     }
 
-    updateConfig(config: AppConfig) {
-        this.config = { ...this.config, ...config };
+    updateStyle(config: AppConfig) {
+        return config.theme !== this._config.theme || config.darkMode !== this._config.darkMode || config.tableTheme !== this._config.tableTheme;
     }
 
-    getConfig() {
-        return this.config;
+    onConfigUpdate() {
+        const config = this.config();
+        config.tableTheme = !config.darkMode ? config.tableTheme.replace('light', 'dark') : config.tableTheme.replace('dark', 'light');
+        this._config = { ...config };
+        this.configUpdate.next(this.config());
+        localStorage.setItem('layout-config', JSON.stringify(config));
     }
 
     showMenu() {
@@ -61,14 +72,6 @@ export class AppConfigService {
         this.state.configActive = false;
     }
 
-    setRipple(value: boolean) {
-        this.config.ripple = value;
-    }
-
-    setInputStyle(value: string) {
-        this.config.inputStyle = value;
-    }
-
     showNews() {
         this.state.newsActive = true;
     }
@@ -76,4 +79,57 @@ export class AppConfigService {
     hideNews() {
         this.state.newsActive = false;
     }
+
+    changeTheme() {
+        const config = this.config();
+        const themeLink = <HTMLLinkElement>document.getElementById('theme-link');
+        const themeLinkHref = themeLink.getAttribute('href')!;
+        const newHref = themeLinkHref
+            .split('/')
+            .map((el) => (el == this._config.theme ? (el = config.theme) : el == `theme-${this._config.darkMode}` ? (el = `theme-${config.darkMode}`) : el))
+            .join('/');
+
+        this.replaceThemeLink(newHref);
+    }
+
+    replaceThemeLink(href: string) {
+        const id = 'theme-link';
+        let themeLink = <HTMLLinkElement>document.getElementById(id);
+        const cloneLinkElement = <HTMLLinkElement>themeLink.cloneNode(true);
+
+        cloneLinkElement.setAttribute('href', href);
+        cloneLinkElement.setAttribute('id', id + '-clone');
+
+        themeLink.parentNode!.insertBefore(cloneLinkElement, themeLink.nextSibling);
+        cloneLinkElement.addEventListener('load', () => {
+            themeLink.remove();
+            cloneLinkElement.setAttribute('id', id);
+        });
+    }
+
+    replaceTableTheme(newTheme: string) {
+        const elementId = 'home-table-link';
+        const linkElement = <HTMLLinkElement>document.getElementById(elementId);
+        const tableThemeTokens = linkElement?.getAttribute('href').split('/') || null;
+        const currentTableTheme = tableThemeTokens ? tableThemeTokens[tableThemeTokens.length - 2] : null;
+        if (currentTableTheme !== newTheme && tableThemeTokens) {
+            const newThemeUrl = linkElement.getAttribute('href').replace(currentTableTheme, newTheme);
+
+            const cloneLinkElement = <HTMLLinkElement>linkElement.cloneNode(true);
+
+            cloneLinkElement.setAttribute('id', elementId + '-clone');
+            cloneLinkElement.setAttribute('href', newThemeUrl);
+            cloneLinkElement.addEventListener('load', () => {
+                linkElement.remove();
+                cloneLinkElement.setAttribute('id', elementId);
+            });
+            linkElement.parentNode?.insertBefore(cloneLinkElement, linkElement.nextSibling);
+        }
+    }
+
+    changeScale(value: number) {
+        if (isPlatformBrowser(this.platformId)) {
+            document.documentElement.style.fontSize = `${value}px`;
+        }
+    }
 }
diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
index 4c9d83dcc61..ee1941436de 100644
--- a/src/assets/components/themes/arya-blue/theme.css
+++ b/src/assets/components/themes/arya-blue/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #383838;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
index 1c2446bb36e..705f3658a12 100644
--- a/src/assets/components/themes/arya-green/theme.css
+++ b/src/assets/components/themes/arya-green/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #383838;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
index c94826a372a..ae4fd4584a3 100644
--- a/src/assets/components/themes/arya-orange/theme.css
+++ b/src/assets/components/themes/arya-orange/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #383838;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
index 7974b53ca57..3180330ea9d 100644
--- a/src/assets/components/themes/arya-purple/theme.css
+++ b/src/assets/components/themes/arya-purple/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #383838;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #383838;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #383838;
   }
diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
index 42bc7e54dd5..7b7fcf84cdf 100644
--- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -4236,6 +4236,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f4b5b;
     border: 0 none;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
   }
 
   .p-splitter {
@@ -4251,6 +4257,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #3f4b5b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #3f4b5b;
   }
diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
index 75bfa35a8e7..b0a3a9736e3 100644
--- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -4236,6 +4236,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f4b5b;
     border: 0 none;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
   }
 
   .p-splitter {
@@ -4251,6 +4257,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #3f4b5b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #3f4b5b;
   }
diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
index 91dbf66b46c..8e2e1f922c0 100644
--- a/src/assets/components/themes/bootstrap4-light-blue/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -4236,6 +4236,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #efefef;
     border: 0 none;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   }
 
   .p-splitter {
@@ -4251,6 +4257,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
index bd21b40e6e2..cf47b51e0d0 100644
--- a/src/assets/components/themes/bootstrap4-light-purple/theme.css
+++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -4236,6 +4236,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #efefef;
     border: 0 none;
+    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   }
 
   .p-splitter {
@@ -4251,6 +4257,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
index 5522786a895..3bbef300a37 100644
--- a/src/assets/components/themes/fluent-light/theme.css
+++ b/src/assets/components/themes/fluent-light/theme.css
@@ -4200,6 +4200,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f3f2f1;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
   }
 
   .p-splitter {
@@ -4215,6 +4221,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #edebe9;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #edebe9;
   }
diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css
index a8d9f1d15c0..1e862ac6ba5 100644
--- a/src/assets/components/themes/lara-dark-blue/theme.css
+++ b/src/assets/components/themes/lara-dark-blue/theme.css
@@ -4217,6 +4217,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
   }
 
   .p-splitter {
@@ -4232,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #424b57;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css
index 8ed52a7cbb3..cc45dfdf449 100644
--- a/src/assets/components/themes/lara-dark-indigo/theme.css
+++ b/src/assets/components/themes/lara-dark-indigo/theme.css
@@ -4217,6 +4217,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
   }
 
   .p-splitter {
@@ -4232,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #424b57;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css
index 2bc9c0e7553..03f8d7dcbcb 100644
--- a/src/assets/components/themes/lara-dark-purple/theme.css
+++ b/src/assets/components/themes/lara-dark-purple/theme.css
@@ -4217,6 +4217,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
   }
 
   .p-splitter {
@@ -4232,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #424b57;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css
index a9e087d9aaa..d32ef3d2e42 100644
--- a/src/assets/components/themes/lara-dark-teal/theme.css
+++ b/src/assets/components/themes/lara-dark-teal/theme.css
@@ -4217,6 +4217,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #424b57;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
   }
 
   .p-splitter {
@@ -4232,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #424b57;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #424b57;
   }
diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css
index 37a9f92bcf0..6597de50c42 100644
--- a/src/assets/components/themes/lara-light-blue/theme.css
+++ b/src/assets/components/themes/lara-light-blue/theme.css
@@ -4217,6 +4217,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #BFDBFE;
   }
 
   .p-splitter {
@@ -4232,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #BFDBFE;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css
index 8f24cb79d52..d37df826d5d 100644
--- a/src/assets/components/themes/lara-light-indigo/theme.css
+++ b/src/assets/components/themes/lara-light-indigo/theme.css
@@ -4217,6 +4217,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #C7D2FE;
   }
 
   .p-splitter {
@@ -4232,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #C7D2FE;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css
index 315dcbc0d0e..0224a722608 100644
--- a/src/assets/components/themes/lara-light-purple/theme.css
+++ b/src/assets/components/themes/lara-light-purple/theme.css
@@ -4217,6 +4217,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #DDD6FE;
   }
 
   .p-splitter {
@@ -4232,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #DDD6FE;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css
index 8dcaa24fe96..718f8927920 100644
--- a/src/assets/components/themes/lara-light-teal/theme.css
+++ b/src/assets/components/themes/lara-light-teal/theme.css
@@ -4217,6 +4217,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f9fafb;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
   }
 
   .p-splitter {
@@ -4232,6 +4238,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
index 633bbec266f..af5f97c981a 100644
--- a/src/assets/components/themes/luna-amber/theme.css
+++ b/src/assets/components/themes/luna-amber/theme.css
@@ -4212,6 +4212,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
   }
 
   .p-splitter {
@@ -4227,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #4b4b4b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
index ba6b73fd471..541893139aa 100644
--- a/src/assets/components/themes/luna-blue/theme.css
+++ b/src/assets/components/themes/luna-blue/theme.css
@@ -4212,6 +4212,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
   }
 
   .p-splitter {
@@ -4227,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #4b4b4b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
index 9b4d841ac1c..1bc15bcfdd5 100644
--- a/src/assets/components/themes/luna-green/theme.css
+++ b/src/assets/components/themes/luna-green/theme.css
@@ -4212,6 +4212,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
   }
 
   .p-splitter {
@@ -4227,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #4b4b4b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
index c54d54b6340..fa68bf648dd 100644
--- a/src/assets/components/themes/luna-pink/theme.css
+++ b/src/assets/components/themes/luna-pink/theme.css
@@ -4212,6 +4212,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3f3f3f;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
   }
 
   .p-splitter {
@@ -4227,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #4b4b4b;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #4b4b4b;
   }
diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
index 3270290573e..e99f49d3fe8 100644
--- a/src/assets/components/themes/md-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -4247,6 +4247,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
   }
 
   .p-splitter {
@@ -4262,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(255, 255, 255, 0.12);
   }
@@ -7793,5 +7804,20 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+
+  .p-scrollpanel .p-scrollpanel-bar:focus {
+    box-shadow: 0 0 1px 4px rgba(165, 214, 167, 0.2);
+  }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(165, 214, 167, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
index 70164fb508f..6d5c6f1a8d3 100644
--- a/src/assets/components/themes/md-dark-indigo/theme.css
+++ b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -4247,6 +4247,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
   }
 
   .p-splitter {
@@ -4262,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(255, 255, 255, 0.12);
   }
@@ -7793,5 +7804,20 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+
+  .p-scrollpanel .p-scrollpanel-bar:focus {
+    box-shadow: 0 0 1px 4px rgba(244, 143, 177, 0.2);
+  }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(244, 143, 177, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
index 4bc2cf309c4..a269478c010 100644
--- a/src/assets/components/themes/md-light-deeppurple/theme.css
+++ b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -4247,6 +4247,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
   }
 
   .p-splitter {
@@ -4262,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
@@ -7793,5 +7804,20 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+
+  .p-scrollpanel .p-scrollpanel-bar:focus {
+    box-shadow: 0 0 1px 4px rgba(76, 175, 80, 0.2);
+  }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(76, 175, 80, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
index 3332a11f954..a1973ce7abc 100644
--- a/src/assets/components/themes/md-light-indigo/theme.css
+++ b/src/assets/components/themes/md-light-indigo/theme.css
@@ -4247,6 +4247,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
   }
 
   .p-splitter {
@@ -4262,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
@@ -7793,5 +7804,20 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+
+  .p-scrollpanel .p-scrollpanel-bar:focus {
+    box-shadow: 0 0 1px 4px rgba(255, 64, 129, 0.2);
+  }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(255, 64, 129, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
index 1dd2ad665fc..b8a19c06df0 100644
--- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -4247,6 +4247,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
   }
 
   .p-splitter {
@@ -4262,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(255, 255, 255, 0.12);
   }
@@ -7793,5 +7804,20 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+
+  .p-scrollpanel .p-scrollpanel-bar:focus {
+    box-shadow: 0 0 1px 4px rgba(165, 214, 167, 0.2);
+  }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(165, 214, 167, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css
index f17b9dae002..033b88ddda4 100644
--- a/src/assets/components/themes/mdc-dark-indigo/theme.css
+++ b/src/assets/components/themes/mdc-dark-indigo/theme.css
@@ -4247,6 +4247,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(255, 255, 255, 0.12);
     border: 0 none;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
   }
 
   .p-splitter {
@@ -4262,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(255, 255, 255, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(255, 255, 255, 0.12);
   }
@@ -7793,5 +7804,20 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(239, 154, 154, 0.16);
   }
+
+  .p-scrollpanel .p-scrollpanel-bar:focus {
+    box-shadow: 0 0 1px 4px rgba(244, 143, 177, 0.2);
+  }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(244, 143, 177, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css
index a39db1fa5f6..5c7ef4a1241 100644
--- a/src/assets/components/themes/mdc-light-deeppurple/theme.css
+++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css
@@ -4247,6 +4247,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
   }
 
   .p-splitter {
@@ -4262,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
@@ -7793,5 +7804,20 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+
+  .p-scrollpanel .p-scrollpanel-bar:focus {
+    box-shadow: 0 0 1px 4px rgba(76, 175, 80, 0.2);
+  }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(76, 175, 80, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css
index 0624082d3ab..0f76110d38c 100644
--- a/src/assets/components/themes/mdc-light-indigo/theme.css
+++ b/src/assets/components/themes/mdc-light-indigo/theme.css
@@ -4247,6 +4247,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: rgba(0, 0, 0, 0.12);
     border: 0 none;
+    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
   }
 
   .p-splitter {
@@ -4262,6 +4268,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: rgba(0, 0, 0, 0.12);
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: rgba(0, 0, 0, 0.12);
   }
@@ -7793,5 +7804,20 @@
   .p-splitbutton.p-button-danger.p-button-text > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger.p-button-outlined > .p-button:not(:disabled):active {
     background: rgba(211, 47, 47, 0.16);
   }
+
+  .p-scrollpanel .p-scrollpanel-bar:focus {
+    box-shadow: 0 0 1px 4px rgba(255, 64, 129, 0.2);
+  }
+
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
+    transition: transform 0.2s, box-shadow 0.2s;
+    transform: scale(0.7);
+  }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+    box-shadow: 0 0 1px 6px rgba(255, 64, 129, 0.2);
+  }
+  .p-splitter .p-splitter-gutter.p-splitter-gutter-resizing .p-splitter-gutter-handle {
+    transform: scale(1);
+  }
 }
 /* Customizations to the designer theme should be defined here */
diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css
index 1efe58dc063..5fda0d2ddb9 100644
--- a/src/assets/components/themes/mira/theme.css
+++ b/src/assets/components/themes/mira/theme.css
@@ -4250,6 +4250,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #eceff4;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
   }
 
   .p-splitter {
@@ -4265,6 +4271,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #c2c7d1;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c0d0e0;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #c2c7d1;
   }
diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css
index bcc99dc4b37..589124d0105 100644
--- a/src/assets/components/themes/nano/theme.css
+++ b/src/assets/components/themes/nano/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f2f4f8;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css
index 1e81110952d..f479e86a19d 100644
--- a/src/assets/components/themes/nova-accent/theme.css
+++ b/src/assets/components/themes/nova-accent/theme.css
@@ -4200,6 +4200,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
   }
 
   .p-splitter {
@@ -4215,6 +4221,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #d8dae2;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css
index 13b7ee5b864..ff503f8c934 100644
--- a/src/assets/components/themes/nova-alt/theme.css
+++ b/src/assets/components/themes/nova-alt/theme.css
@@ -4212,6 +4212,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
   }
 
   .p-splitter {
@@ -4227,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #d8dae2;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css
index bb4de300bb3..5466858f27c 100644
--- a/src/assets/components/themes/nova/theme.css
+++ b/src/assets/components/themes/nova/theme.css
@@ -4212,6 +4212,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
   }
 
   .p-splitter {
@@ -4227,6 +4233,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #d8dae2;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #d8dae2;
   }
diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css
index 38bb737ef87..fe8b8034056 100644
--- a/src/assets/components/themes/rhea/theme.css
+++ b/src/assets/components/themes/rhea/theme.css
@@ -4200,6 +4200,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f8f8;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
   }
 
   .p-splitter {
@@ -4215,6 +4221,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dadada;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dadada;
   }
diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css
index e0971f9fd4f..0310b0859c4 100644
--- a/src/assets/components/themes/saga-blue/theme.css
+++ b/src/assets/components/themes/saga-blue/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css
index 4d91d1982b8..22b3571b6d2 100644
--- a/src/assets/components/themes/saga-green/theme.css
+++ b/src/assets/components/themes/saga-green/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css
index 1f2dcc8a81f..d707742c8be 100644
--- a/src/assets/components/themes/saga-orange/theme.css
+++ b/src/assets/components/themes/saga-orange/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css
index 6719eb0f53c..cda6af5d699 100644
--- a/src/assets/components/themes/saga-purple/theme.css
+++ b/src/assets/components/themes/saga-purple/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f8f9fa;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dee2e6;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dee2e6;
   }
diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css
index b4bedb3ab70..3904efbfbc7 100644
--- a/src/assets/components/themes/soho-dark/theme.css
+++ b/src/assets/components/themes/soho-dark/theme.css
@@ -4222,6 +4222,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #3e4053;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
   }
 
   .p-splitter {
@@ -4237,6 +4243,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #3e4053;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #3e4053;
   }
diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css
index 0ae5b1fda90..c3742101659 100644
--- a/src/assets/components/themes/soho-light/theme.css
+++ b/src/assets/components/themes/soho-light/theme.css
@@ -4222,6 +4222,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #eff3f8;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
   }
 
   .p-splitter {
@@ -4237,6 +4243,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #dfe7ef;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #dfe7ef;
   }
diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css
index 81f834fbfac..0f98ecc795d 100644
--- a/src/assets/components/themes/tailwind-light/theme.css
+++ b/src/assets/components/themes/tailwind-light/theme.css
@@ -4260,6 +4260,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #fafafa;
     border: 0 none;
+    transition: none;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
   }
 
   .p-splitter {
@@ -4275,6 +4281,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #e5e7eb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366f1;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #e5e7eb;
   }
diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css
index e349a5b927a..6b66a7bef1b 100644
--- a/src/assets/components/themes/vela-blue/theme.css
+++ b/src/assets/components/themes/vela-blue/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #304562;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css
index a2ad4548927..5b4a490d646 100644
--- a/src/assets/components/themes/vela-green/theme.css
+++ b/src/assets/components/themes/vela-green/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #304562;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css
index 9d79057675f..0c4dfac199d 100644
--- a/src/assets/components/themes/vela-orange/theme.css
+++ b/src/assets/components/themes/vela-orange/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #304562;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css
index 3b3e992edbf..9761c8f19cb 100644
--- a/src/assets/components/themes/vela-purple/theme.css
+++ b/src/assets/components/themes/vela-purple/theme.css
@@ -4224,6 +4224,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #304562;
     border: 0 none;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
   }
 
   .p-splitter {
@@ -4239,6 +4245,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #304562;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #304562;
   }
diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css
index 871a5363dd0..3c26fd8dab7 100644
--- a/src/assets/components/themes/viva-dark/theme.css
+++ b/src/assets/components/themes/viva-dark/theme.css
@@ -4254,6 +4254,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #263238;
     border: 0 none;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
   }
 
   .p-splitter {
@@ -4269,6 +4275,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #263238;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #263238;
   }
diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css
index dbf9236fadc..f3c92374540 100644
--- a/src/assets/components/themes/viva-light/theme.css
+++ b/src/assets/components/themes/viva-light/theme.css
@@ -4255,6 +4255,12 @@
   .p-scrollpanel .p-scrollpanel-bar {
     background: #f5f5f5;
     border: 0 none;
+    transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  }
+  .p-scrollpanel .p-scrollpanel-bar:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
   }
 
   .p-splitter {
@@ -4270,6 +4276,11 @@
   .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
     background: #ebebeb;
   }
+  .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
   .p-splitter .p-splitter-gutter-resizing {
     background: #ebebeb;
   }