Add loader for book details component

This commit is contained in:
aditya.chandel
2025-08-14 15:02:36 -06:00
committed by Aditya Chandel
parent d0f8791b14
commit f5e58080ea
2 changed files with 17 additions and 5 deletions

View File

@@ -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>
}

View File

@@ -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>;