mirror of
https://github.com/adityachandelgit/BookLore.git
synced 2026-02-12 06:14:48 -06:00
Add loader for book details component
This commit is contained in:
committed by
Aditya Chandel
parent
d0f8791b14
commit
f5e58080ea
@@ -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>
|
||||
}
|
||||
|
||||
@@ -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>;
|
||||
|
||||
Reference in New Issue
Block a user