From ed798a9e5e8245ac9efd477313dfa9f3389fa893 Mon Sep 17 00:00:00 2001
From: Abhishek Sharma <hello.abhishek@outlook.com>
Date: Jun 22 2018 19:14:46 +0000
Subject: add homepage loader


---

diff --git a/src/app/app.scss b/src/app/app.scss
index 4344684..86ec68c 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -122,3 +122,79 @@ ion-navbar {
     background-color: #fff !important;
     box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05);
 }
+
+//styles for loader
+.loader-ellipsis {
+    display: inline-block;
+    position: relative;
+    width: 64px;
+    height: 64px;
+    div {
+        position: absolute;
+        top: 27px;
+        width: 11px;
+        height: 11px;
+        border-radius: 50%;
+        background: rgba(#79818B, 0.15);
+        animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    }
+    div:nth-child(1) {
+        left: 6px;
+        animation: loader-ellipsis1 0.6s infinite;
+    }
+    div:nth-child(2) {
+        left: 6px;
+        animation: loader-ellipsis2 0.6s infinite;
+    }
+    div:nth-child(3) {
+        left: 26px;
+        animation: loader-ellipsis2 0.6s infinite;
+    }
+    div:nth-child(4) {
+        left: 45px;
+        animation: loader-ellipsis3 0.6s infinite;
+    }
+}
+
+@keyframes loader-ellipsis1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+@keyframes loader-ellipsis3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+
+@keyframes loader-ellipsis2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(19px, 0);
+    }
+}
+
+.loader {
+    height: 100%;
+    width: 100%;
+    background-color: #EFF0F1;
+    position: absolute;
+    top: 0;
+    z-index: 999;
+    display: grid;
+    place-items: center center;
+    justify-content: center;
+}
+
+.hidden {
+    display: none;
+}
\ No newline at end of file
diff --git a/src/pages/home/home.html b/src/pages/home/home.html
index 8facbf9..01c259f 100644
--- a/src/pages/home/home.html
+++ b/src/pages/home/home.html
@@ -12,51 +12,59 @@
 </ion-header>
 
 <ion-content>
-  <ion-slides autoplay="3000" centeredSlides effect="fade" loop speed="700" *ngIf="carousel.length !== 0">
-    <ion-slide *ngFor="let post of carousel" tappable (click)="openUpdate(post)">
-      <a href="{{post.link}}">
-        <img src="{{post.image}}">
-      </a>
-    </ion-slide>
-  </ion-slides>
+  <div class="loader" id="home-ld">
+    <div class="loader-ellipsis">
+      <div></div>
+      <div></div>
+    </div>
+  </div>
+  <div class="hidden" id="home">
+    <ion-slides autoplay="3000" centeredSlides effect="fade" loop speed="700" *ngIf="carousel.length !== 0">
+      <ion-slide *ngFor="let post of carousel" tappable (click)="openUpdate(post)">
+        <a href="{{post.link}}">
+          <img src="{{post.image}}">
+        </a>
+      </ion-slide>
+    </ion-slides>
 
-  <div class="latest">
-    <ion-label>Latest from the community </ion-label>
-    <ion-segment [(ngModel)]="latestActive">
-      <ion-segment-button value="blog">
-        Community Blog
-      </ion-segment-button>
-      <ion-segment-button value="social">
-        Social Media
-      </ion-segment-button>
-    </ion-segment>
-    <div [ngSwitch]="latestActive">
-      <ion-list *ngSwitchCase="'blog'">
-        <ion-list *ngIf="blogposts.length !== 0">
-          <ion-card *ngFor="let blogpost of blogposts" tappable (click)="openUpdate(blogpost)">
-            <ion-card-header [innerHTML]="blogpost.title" class="body-title"></ion-card-header>
-            <ion-card-content [innerHTML]="blogpost.publishedAt" class="body-subtitle">
-            </ion-card-content>
-          </ion-card>
+    <div class="latest">
+      <ion-label>Latest from the community </ion-label>
+      <ion-segment [(ngModel)]="latestActive">
+        <ion-segment-button value="blog">
+          Community Blog
+        </ion-segment-button>
+        <ion-segment-button value="social">
+          Social Media
+        </ion-segment-button>
+      </ion-segment>
+      <div [ngSwitch]="latestActive">
+        <ion-list *ngSwitchCase="'blog'">
+          <ion-list *ngIf="blogposts.length !== 0">
+            <ion-card *ngFor="let blogpost of blogposts" tappable (click)="openUpdate(blogpost)">
+              <ion-card-header [innerHTML]="blogpost.title" class="body-title"></ion-card-header>
+              <ion-card-content [innerHTML]="blogpost.publishedAt" class="body-subtitle">
+              </ion-card-content>
+            </ion-card>
+          </ion-list>
         </ion-list>
-      </ion-list>
-      <ion-list *ngSwitchCase="'social'">
-        <ion-list *ngIf="socialposts.length !== 0">
-          <ion-card *ngFor="let update of socialposts" tappable (click)="openUpdate(update)">
-            <ion-card-header>
-              <img src="./assets/img/logo.svg" height="34px">
-              <div>
-                <span class="active-title">Fedora</span>
-                <span class="body-subtitle">
-                  <ion-icon name="logo-{{ update.origin }}" color="fedoraltblue"></ion-icon>
-                  {{update.date}}
-                </span>
-              </div>
-            </ion-card-header>
-            <ion-card-content [innerHTML]="update.content" class="content social"></ion-card-content>
-          </ion-card>
+        <ion-list *ngSwitchCase="'social'">
+          <ion-list *ngIf="socialposts.length !== 0">
+            <ion-card *ngFor="let update of socialposts" tappable (click)="openUpdate(update)">
+              <ion-card-header>
+                <img src="./assets/img/logo.svg" height="34px">
+                <div>
+                  <span class="active-title">Fedora</span>
+                  <span class="body-subtitle">
+                    <ion-icon name="logo-{{ update.origin }}" color="fedoraltblue"></ion-icon>
+                    {{update.date}}
+                  </span>
+                </div>
+              </ion-card-header>
+              <ion-card-content [innerHTML]="update.content" class="content social"></ion-card-content>
+            </ion-card>
+          </ion-list>
         </ion-list>
-      </ion-list>
+      </div>
     </div>
   </div>
 </ion-content>
\ No newline at end of file
diff --git a/src/providers/fedora-magazine/fedora-magazine.ts b/src/providers/fedora-magazine/fedora-magazine.ts
index 1cace85..cf9b242 100644
--- a/src/providers/fedora-magazine/fedora-magazine.ts
+++ b/src/providers/fedora-magazine/fedora-magazine.ts
@@ -5,7 +5,8 @@ import { Observable } from 'rxjs/Observable';
 import { map, tap } from 'rxjs/operators';
 import { fromPromise } from 'rxjs/observable/fromPromise';
 import { merge } from 'rxjs/observable/merge';
-import { chooseEndpoint, defaultValue, beautifyDate } from '../../utils';
+import { chooseEndpoint, defaultValue, beautifyDate, hideLoader } from '../../utils';
+import 'rxjs/add/operator/do';
 
 /**
  * Endpoint for this service.
@@ -149,6 +150,8 @@ export class FedoraMagazineService {
         id: image.id,
         link: image.link,
         image: image._embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url
-      })));
+      }))).do(()=>{
+        hideLoader('home');
+      });
   }
 }
diff --git a/src/utils.ts b/src/utils.ts
index a541bfe..367e8bd 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -38,3 +38,25 @@ export function beautifyDate(postDate: any, type: string): string {
     return jsDate[1] + ' ' + jsDate[2] + ', ' + jsDate[3];
   }
 }
+
+
+/**
+ * Function to update class names once loading has finished.
+ * @param page page from which we need to hide loader
+ */
+export function hideLoader(page: string): void {
+  //get the content item
+  let mainContent = document.getElementById(page);
+
+  //get the loader
+  let loader = document.getElementById(page + '-ld');
+
+  //check if loader is visible
+  if (loader.className.match(/\bloader\b/)) {
+    //make content visible
+    mainContent.className = page + '-content';
+
+    //hide the loader
+    loader.className = 'hidden';
+  }
+}
\ No newline at end of file