#91 [WIP] Add homepage loader
Closed 6 months ago by thelittlewonder. Opened 10 months ago by thelittlewonder.
thelittlewonder/Fedora-app loader  into  master

add homepage loader
Abhishek Sharma • 10 months ago  
file modified
+76

@@ -122,3 +122,79 @@ 

      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

file modified
+50 -42

@@ -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

@@ -5,7 +5,8 @@ 

  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';

Do not pollute the namespace, use the functional RxJS operators using pipe(...) and tap(...)

  

  /**

   * Endpoint for this service.

@@ -149,6 +150,8 @@ 

          id: image.id,

          link: image.link,

          image: image._embedded['wp:featuredmedia']['0'].media_details.sizes.medium_large.source_url

-       })));

+       }))).do(()=>{

+         hideLoader('home');

+       });

    }

  }

file modified
+22

@@ -38,3 +38,25 @@ 

      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 {

Avoid using DOM manipulation, this sometimes interferes with the Angular diff implementation.

+   //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

rebased onto ed798a9

10 months ago

Avoid using DOM manipulation, this sometimes interferes with the Angular diff implementation.

Do not pollute the namespace, use the functional RxJS operators using pipe(...) and tap(...)

You may wish to develop this functionality against #93, it changes few APIs and makes it easier for you to implement this functionality

Pull-Request has been closed by thelittlewonder

6 months ago