diff --git a/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html b/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
index d1812c320..965841d52 100644
--- a/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
+++ b/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.html
@@ -1,5 +1,5 @@
-<div class="p-0 md:p-2 flex flex-col h-full w-full rounded-xl">
-  @if (book$ | async; as book) {
+@if (book$ | async; as book) {
+  <div class="p-0 md:p-2 flex flex-col h-full w-full rounded-xl">
     <div class="flex flex-col md:flex-row gap-4 md:gap-6 pb-8">
 
       <div class="flex justify-center md:justify-start">
@@ -550,5 +550,16 @@
         </p-tabpanel>
       </p-tabpanels>
     </p-tabs>
-  }
-</div>
+  </div>
+} @else {
+  <div class="flex flex-col justify-center items-center h-full gap-4">
+    <p-progressSpinner
+      strokeWidth="4"
+      fill="transparent"
+      animationDuration=".8s">
+    </p-progressSpinner>
+    <p style="color: var(--primary-color);">
+      Loading book details...
+    </p>
+  </div>
+}
diff --git a/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.ts b/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.ts
index 0339d0ef1..d27a692b4 100644
--- a/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.ts
+++ b/booklore-ui/src/app/metadata/book-metadata-center-component/metadata-viewer/metadata-viewer.component.ts
@@ -32,13 +32,14 @@ import {DatePicker} from 'primeng/datepicker';
 import {Tab, TabList, TabPanel, TabPanels, Tabs} from 'primeng/tabs';
 import {BookReviewsComponent} from '../../../book/components/book-reviews/book-reviews.component';
 import {BookNotesComponent} from '../../../book/components/book-notes-component/book-notes-component';
+import {ProgressSpinner} from 'primeng/progressspinner';
 
 @Component({
   selector: 'app-metadata-viewer',
   standalone: true,
   templateUrl: './metadata-viewer.component.html',
   styleUrl: './metadata-viewer.component.scss',
-  imports: [Button, AsyncPipe, Rating, FormsModule, Tag, SplitButton, NgClass, Tooltip, DecimalPipe, Editor, ProgressBar, Menu, InfiniteScrollDirective, BookCardLiteComponent, DatePicker, Tab, TabList, TabPanel, TabPanels, Tabs, BookReviewsComponent, BookNotesComponent]
+  imports: [Button, AsyncPipe, Rating, FormsModule, Tag, SplitButton, NgClass, Tooltip, DecimalPipe, Editor, ProgressBar, Menu, InfiniteScrollDirective, BookCardLiteComponent, DatePicker, Tab, TabList, TabPanel, TabPanels, Tabs, BookReviewsComponent, BookNotesComponent, ProgressSpinner]
 })
 export class MetadataViewerComponent implements OnInit, OnChanges {
   @Input() book$!: Observable<Book | null>;