feat: add loading component on home page

src/app/ui/pages/home/home.component.html

@@ -1,11 +1,20 @@
 <app-section
+    *ngIf="!isRecentlyAddedLoading"
     title="{{ 'PAGES.HOME.NEW_RELEASES' | translate }}"
     [apps]="recentlyAddedApps"
     (seeMoreClicked)="showRecentlyAddedApps()"
 ></app-section>
 
 <app-section
+    *ngIf="!isRecentlyUpdatedLoading"
     title="{{ 'PAGES.HOME.RECENTLY_UPDATED' | translate }}"
     [apps]="recentlyUpdatedApps"
     (seeMoreClicked)="showRecentlyUpdatedApps()"
 ></app-section>
+
+<div
+    *ngIf="isRecentlyAddedLoading || isRecentlyUpdatedLoading"
+    [nbSpinner]="true"
+    nbSpinnerSize="giant"
+    class="loading-indicator"
+></div>

src/app/ui/pages/home/home.component.scss

@@ -0,0 +1,4 @@
+.loading-indicator {
+    height: 100%;
+    position: relative;
+}

src/app/ui/pages/home/home.component.ts

@@ -11,6 +11,8 @@ import { Router } from '@angular/router';
 export class HomeComponent implements OnInit {
     recentlyUpdatedApps: Application[] = [];
     recentlyAddedApps: Application[] = [];
+    isRecentlyAddedLoading = false;
+    isRecentlyUpdatedLoading = false;
 
     constructor(
         private applicationService: ApplicationService,
@@ -23,15 +25,31 @@ export class HomeComponent implements OnInit {
     }
 
     private getRecentlyAddedApps(): void {
-        this.applicationService.getRecentlyAdded().then((apps) => {
-            this.recentlyAddedApps = apps;
-        });
+        this.isRecentlyAddedLoading = true;
+        this.applicationService
+            .getRecentlyAdded()
+            .then((apps) => {
+                this.recentlyAddedApps = apps;
+                this.isRecentlyAddedLoading = false;
+            })
+            .catch((err) => {
+                console.error(err);
+                this.isRecentlyAddedLoading = false;
+            });
     }
 
     private getRecentlyUpdatedApps(): void {
-        this.applicationService.getRecentlyUpdated().then((apps) => {
-            this.recentlyUpdatedApps = apps;
-        });
+        this.isRecentlyUpdatedLoading = true;
+        this.applicationService
+            .getRecentlyUpdated()
+            .then((apps) => {
+                this.recentlyUpdatedApps = apps;
+                this.isRecentlyUpdatedLoading = false;
+            })
+            .catch((err) => {
+                console.error(err);
+                this.isRecentlyUpdatedLoading = false;
+            });
     }
 
     async showRecentlyAddedApps(): Promise<void> {

src/app/ui/pages/home/home.module.ts

@@ -5,6 +5,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { HomeComponent } from './home.component';
 import { SectionModule } from '../../components/section/section.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { NbSpinnerModule } from '@nebular/theme';
 
 const routes: Routes = [{ path: '', component: HomeComponent }];
 
@@ -15,6 +16,7 @@ const routes: Routes = [{ path: '', component: HomeComponent }];
         RouterModule.forChild(routes),
         SectionModule,
         TranslateModule.forChild(),
+        NbSpinnerModule,
     ],
 })
 export class HomeModule {}