Added spinner to scrolling up

rafagm · Sep 16, 2020 · b86fda9 · b86fda9
1 parent 0173435
commit b86fda9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 5 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -29,8 +29,13 @@
   </div>
 </div>
 
+<div class="spinner-wrapper spinner-top" [ngStyle]="{'display': showTopSpinner ? 'flex' : 'none'}">
+  <div class="spinner-border"   role="status">
+    <span class="sr-only">Loading images...</span>
+  </div>
+</div>
 
-<div class="spinner-wrapper" [ngStyle]="{'display': showSpinner ? 'flex' : 'none'}">
+<div class="spinner-wrapper" [ngStyle]="{'display': showBottomSpinner ? 'flex' : 'none'}">
   <div class="spinner-border"   role="status">
     <span class="sr-only">Loading images...</span>
   </div>

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -100,6 +100,11 @@
   border-radius: 10000px;
   padding: .5rem;
 }
+
+.spinner-top {
+  bottom: auto;
+  top: 10%;
+}
 .spinner-border {
   color: $color-secondary;
   position: relative;

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -21,7 +21,8 @@ export class AppComponent {
   private scrolledUp = false;
   private scrolledDownCounter = 0;
 
-  showSpinner = true;
+  showBottomSpinner = false;
+  showTopSpinner = false;
 
   constructor(private imageService: ImageService) {
     this.setPageSize();
@@ -48,7 +49,8 @@ export class AppComponent {
   }
 
   getALLImagesPagination(pageNo?, pageSize?, sortBy?, scrolledUp = false) {
-    this.showSpinner = true;
+    this.showSpinners(scrolledUp);
+
 
     if (this.scrolledUp && !scrolledUp) {
       pageNo = this.pageNo + Math.floor(this.imagesSize / this.pageSize);
@@ -67,7 +69,7 @@ export class AppComponent {
       this.imageService
       .getAllImagesPagination(pageNo, pageSize, sortBy)
       .subscribe((images: Image[]) => {
-        this.showSpinner = false;
+        this.hideSpinners();
 
         this.pageNo = pageNo;
 
@@ -80,7 +82,16 @@ export class AppComponent {
         }
 
       });
-    }, 300);
+    }, 0);
+  }
+
+  showSpinners(scrolledUp) {
+    if (!scrolledUp) this.showBottomSpinner = true;
+    else this.showTopSpinner = true;
+  }
+
+  hideSpinners() {
+    this.showBottomSpinner = this.showTopSpinner = false;
   }
 
   onScroll() {