From 1aea55faea562dd33365779be2e1fd32c64eb088 Mon Sep 17 00:00:00 2001
From: ACX <8075870+acx10@users.noreply.github.com>
Date: Fri, 23 Jan 2026 19:17:53 -0700
Subject: [PATCH] perf: lazy-load accordion content in library metadata
 settings (#2442)

---
 .../library-metadata-settings.component.html       | 14 ++++++++------
 .../library-metadata-settings.component.ts         |  5 +++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/booklore-ui/src/app/features/settings/library-metadata-settings/library-metadata-settings.component.html b/booklore-ui/src/app/features/settings/library-metadata-settings/library-metadata-settings.component.html
index 022e67db3..dbe9e5393 100644
--- a/booklore-ui/src/app/features/settings/library-metadata-settings/library-metadata-settings.component.html
+++ b/booklore-ui/src/app/features/settings/library-metadata-settings/library-metadata-settings.component.html
@@ -50,7 +50,7 @@
 
       <div class="settings-card">
         @if (libraries$ | async; as libraries) {
-          <p-accordion>
+          <p-accordion [value]="activePanel" (valueChange)="onPanelChange($event)">
             @for (library of libraries; track trackByLibrary($index, library); let i = $index) {
               <p-accordion-panel [value]="i">
                 <p-accordion-header>
@@ -75,11 +75,13 @@
                 </p-accordion-header>
                 <p-accordion-content>
                   <div class="accordion-content-wrapper">
-                    <app-metadata-advanced-fetch-options
-                      [currentMetadataOptions]="getLibraryOptions(library.id!)"
-                      [submitButtonLabel]="'Save ' + library.name + ' Settings'"
-                      (metadataOptionsSubmitted)="onLibraryMetadataOptionsSubmitted(library.id!, $event)">
-                    </app-metadata-advanced-fetch-options>
+                    @if (activePanel === i) {
+                      <app-metadata-advanced-fetch-options
+                        [currentMetadataOptions]="getLibraryOptions(library.id!)"
+                        [submitButtonLabel]="'Save ' + library.name + ' Settings'"
+                        (metadataOptionsSubmitted)="onLibraryMetadataOptionsSubmitted(library.id!, $event)">
+                      </app-metadata-advanced-fetch-options>
+                    }
                   </div>
                 </p-accordion-content>
               </p-accordion-panel>
diff --git a/booklore-ui/src/app/features/settings/library-metadata-settings/library-metadata-settings.component.ts b/booklore-ui/src/app/features/settings/library-metadata-settings/library-metadata-settings.component.ts
index a26f38b80..792ae7074 100644
--- a/booklore-ui/src/app/features/settings/library-metadata-settings/library-metadata-settings.component.ts
+++ b/booklore-ui/src/app/features/settings/library-metadata-settings/library-metadata-settings.component.ts
@@ -32,6 +32,7 @@ export class LibraryMetadataSettingsComponent implements OnInit {
 
   defaultMetadataOptions: MetadataRefreshOptions = this.getDefaultMetadataOptions();
   libraryMetadataOptions: Record<number, MetadataRefreshOptions> = {};
+  activePanel: number | null = null;
 
   ngOnInit() {
     this.appSettingsService.appSettings$.subscribe(appSettings => {
@@ -54,6 +55,10 @@ export class LibraryMetadataSettingsComponent implements OnInit {
     });
   }
 
+  onPanelChange(event: unknown) {
+    this.activePanel = typeof event === 'number' ? event : null;
+  }
+
   onDefaultMetadataOptionsSubmitted(options: MetadataRefreshOptions) {
     this.defaultMetadataOptions = options;
     this.saveDefaultMetadataOptions(options);