github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-22 06:13:22 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

perf(discover): ⚡ Improve load performance on the discover page

Browse source
This commit is contained in:
tidusjar 2024-03-06 08:47:22 +00:00
commit 00eb157531
3 changed files with 15 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
View file

@ -1,5 +1,5 @@
<p-skeleton id="cardLoading{{result.id}}" *ngIf="!fullyLoaded" width="100%" height="315px"></p-skeleton>
@defer (on viewport; prefetch on idle) {
<div id="result{{result.id}}" *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'"> <div id="result{{result.id}}" *ngIf="fullyLoaded" class="ombi-card dark-card c" [style.display]="hide ? 'none' : 'block'">
<div class="card-top-info"> <div class="card-top-info">
<div class="top-left" id="type{{result.id}}-{{RequestType[result.type]}}"> <div class="top-left" id="type{{result.id}}-{{RequestType[result.type]}}">
@ -48,3 +48,7 @@
</div> </div>
</div> </div>
}
@placeholder {
<p-skeleton id="cardLoading{{result.id}}" width="100%" height="315px"></p-skeleton>
}

5
src/Ombi/ClientApp/src/app/discover/components/discover/discover.component.html
View file

@ -1,7 +1,12 @@
<div class="small-middle-container"> <div class="small-middle-container">
<div class="section"> <div class="section">
@defer (on viewport; prefetch on idle) {
<h2 id="genreHeading" data-toggle="collapse" href="#genreCollapse" role="button">{{ 'Discovery.Genres' | translate }}</h2> <h2 id="genreHeading" data-toggle="collapse" href="#genreCollapse" role="button">{{ 'Discovery.Genres' | translate }}</h2>
<genre-button-select class="collapse show" id="genreCollapse"></genre-button-select> <genre-button-select class="collapse show" id="genreCollapse"></genre-button-select>
}
@placeholder {
<p-skeleton width="100%" height="2rem"></p-skeleton>
}
</div> </div>
<div class="section"> <div class="section">
<h2>{{ 'Discovery.RecentlyRequestedTab' | translate }}</h2> <h2>{{ 'Discovery.RecentlyRequestedTab' | translate }}</h2>

5
src/Ombi/ClientApp/src/app/discover/components/recently-requested-list/recently-requested-list.component.html
View file

@ -3,6 +3,7 @@
<p-carousel #carousel [value]="requests" [numVisible]="3" [numScroll]="1" <p-carousel #carousel [value]="requests" [numVisible]="3" [numScroll]="1"
[responsiveOptions]="responsiveOptions" [page]="0"> [responsiveOptions]="responsiveOptions" [page]="0">
<ng-template let-result pTemplate="item"> <ng-template let-result pTemplate="item">
@defer (on viewport; prefetch on idle) {
<ombi-detailed-card <ombi-detailed-card
[request]="result" [request]="result"
[isAdmin]="isAdmin" [isAdmin]="isAdmin"
@ -10,6 +11,10 @@
(onApprove)="approve(result)" (onApprove)="approve(result)"
(onDeny)="deny(result)"> (onDeny)="deny(result)">
</ombi-detailed-card> </ombi-detailed-card>
}
@placeholder {
<p-skeleton width="100%" height="315px"></p-skeleton>
}
</ng-template> </ng-template>
</p-carousel> </p-carousel>
</div> </div>