#117 Fix #100 - Show loader when data loads
Opened 2 years ago by akashbhave. Modified 2 years ago
akashbhave/Fedora-app master  into  master

file modified
+2

@@ -24,6 +24,7 @@ 

  import { NoMeetingsComponent } from '../components/no-meetings/no-meetings';

  import { NoResultsComponent } from '../components/no-results/no-results';

  import { NoInternetComponent } from '../components/no-internet/no-internet';

+ import { LoaderComponent } from '../components/loader/loader';

  

  import { Browser } from '../providers/browser/browser';

  

@@ -49,6 +50,7 @@ 

      NoMeetingsComponent,

      NoResultsComponent,

      NoInternetComponent,

+     LoaderComponent,

      FedoraPodcast,

      PodcastPlayer

    ],

file modified
-72

@@ -196,78 +196,6 @@ 

    }

  }

  

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

  }

@@ -0,0 +1,8 @@ 

+ import { NgModule } from '@angular/core';

+ import { LoaderComponent } from './loader/loader';

+ @NgModule({

+ 	declarations: [LoaderComponent],

+ 	imports: [],

+ 	exports: [LoaderComponent]

+ })

+ export class ComponentsModule {}

@@ -0,0 +1,6 @@ 

+ <div class="loader" id="home-ld">

I can't find the CSS of loader. Did you forget to include it?

+     <div class="loader-ellipsis">

+       <div></div>

+       <div></div>

+     </div>

+ </div> 

\ No newline at end of file

@@ -0,0 +1,80 @@ 

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

+ }

@@ -0,0 +1,12 @@ 

+ import { Component } from '@angular/core';

+ 

+ @Component({

+   selector: 'loader',

+   templateUrl: 'loader.html'

+ })

+ export class LoaderComponent {

+ 

+   constructor() {

+   }

+ 

+ }

file modified
+1

@@ -22,6 +22,7 @@ 

          Popular

        </ion-segment-button>

      </ion-segment>

+     <loader *ngIf="loadingResults"></loader>

      <ion-list>

        <ion-list *ngIf="questions.length !== 0">

          <ion-card *ngFor="let question of questions" tappable (click)="openQuestion(question)">

file modified
+7

@@ -23,6 +23,11 @@ 

     */

    private questions: Question[];

  

+   /**

+    * Controls whether or not the loader is shown

+    */

+   private loadingResults;

+ 

    constructor(private browser: Browser,

      private askFedora: AskFedoraService) {

      this.questions = [];

@@ -36,10 +41,12 @@ 

     * Fetch a list of latest questions using Ask Fedora API.

     */

    updateQuestions(type: string): void {

+     this.loadingResults = true;

      this.askFedora

        .getQuestions(type)

        .subscribe(questions => {

          this.questions = questions || [];

+         this.loadingResults = false;

        });

    }

  

@@ -27,6 +27,7 @@ 

        Past Events

      </ion-segment-button>

    </ion-segment>

+   <loader *ngIf="loadingResults"></loader>

    <ion-list>

      <div *ngIf="meetings.length !== 0">

        <ion-card *ngFor="let meeting of meetings">

@@ -39,6 +39,11 @@ 

    private meetings: Meeting[];

  

    /**

+    * Controls whether or not the loader is shown

+    */

+   private loadingResults; 

+ 

+   /**

     * ID of the selected calendar

     */

    public selectedCalendar: CalendarType;

@@ -81,10 +86,12 @@ 

     * @param type type of meetings to fetch, upcoming or past

     */

    updateMeetings(type: string): void {

+     this.loadingResults = true;

      this.fedoCal

        .getMeetings(this.selectedCalendar, type)

        .subscribe(meetings => {

          this.meetings = meetings;

+         this.loadingResults = false;

        });

    }

  

@@ -12,6 +12,7 @@ 

  </ion-header>

  

  <ion-content>

+   <loader *ngIf="loadingResults"></loader>

    <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}}">

file modified
+7

@@ -41,6 +41,11 @@ 

     */

    private blogposts: Post[];

  

+   /**

+    * Controls whether or not the loader is shown

+    */

+   private loadingResults;

+ 

    constructor(public navCtrl: NavController, private browser: Browser,

                private fb: FacebookProvider,

                private twitter: TwitterProvider,

@@ -67,9 +72,11 @@ 

     * Fetch Latest 5 Images from 'Latest from Fedora Section' of Magazine for carousel

     */

    private updateImages(): void {

+     this.loadingResults = true;

      this.fedoraMag.getImages()

        .subscribe(images => {

          this.carousel = images;

+         this.loadingResults = false;

        });

    }

  

@@ -17,6 +17,7 @@ 

        <img src='./assets/img/sort.svg'>

      </button>

    </ion-label>

+   <loader *ngIf="loadingResults"></loader>

    <ion-list>

      <ion-card *ngFor="let post of posts let i = index">

        <ion-row>

@@ -18,6 +18,11 @@ 

     * List of posts from Fedora Magazine

     */

    private posts: Post[];

+   

+   /**

+    * Controls whether or not the loader is shown

+    */

+   private loadingResults;

  

    /**

     * Number of posts

@@ -50,9 +55,11 @@ 

     * Fetch latest posts from Fedor Magazine API

     */

    updatePosts(postCount): void {

+     this.loadingResults = true;

      this.fedoraMag.getPosts(postCount)

        .subscribe(posts => {

          this.posts = posts;

+         this.loadingResults = false;

        });

    }

  

file modified
+15 -1

@@ -153,6 +153,11 @@ 

     */

    private blogposts: Post[];

  

+   /**

+    * Controls whether or not the loader is shown

+    */

+   private loadingResults; 

+ 

    constructor(private browser: Browser, private communityblog: CommunityBlogService) {

      this.blogposts = [];

    }

@@ -161,9 +166,11 @@ 

     * Fetch Blog Posts from the Fedora Community Blog

     */

    private updateBlogPosts(): void {

+     this.loadingResults = true;

      this.communityblog.getBlogPosts('454')

        .subscribe(blogposts => {

          this.blogposts = blogposts;

+         this.loadingResults = false;

        });

    }

  

@@ -190,6 +197,11 @@ 

  })

  export class FedoraPodcast {

    /**

+    * Controls whether or not the loader is shown

+    */

+   private loadingResults; 

+ 

+   /**

     * List of podcasts from Fedora Podcast

     */

    private podcasts: Podcast[];

@@ -200,8 +212,10 @@ 

     * Fetch podcasts from the Fedora Podcast simplecast channel

     */

    private updatePodcasts(): void {

+     this.loadingResults = true;

      this.fedorapodcast.getPodcasts().subscribe(podcasts => {

-       this.podcasts = podcasts

+       this.podcasts = podcasts;

+       this.loadingResults = false;

      });

    }

    /**Open player for the podcast

@@ -10,12 +10,7 @@ 

  </ion-header>

  <ion-content>

    <!--Loader Component-->

-   <div class="loader" *ngIf="loaderState">

-     <div class="loader-ellipsis">

-       <div></div>

-       <div></div>

-     </div>

-   </div>

+   <loader *ngIf="loadingResults"></loader>

  

    <!--Player Component-->

    <div class="player">

@@ -16,6 +16,7 @@ 

      if you need more information. Fedora Diversity and Inclusion team is committed to fostering diversity and inclusion in Fedora

      community.

    </p>

+   <loader *ngIf="loadingResults"></loader>

    <ion-list *ngIf="blogposts.length !== 0">

      <ion-label class="label">Latest Updates</ion-label>

      <ion-card *ngFor="let blogpost of blogposts" tappable (click)="openUpdate(blogpost)">

Description

Add loader to the Magazine, Calendar, and Ask pages. The loader is displayed with the LoaderComponent. The state of the loader is controlled with the variable loadingResults. This value is changed to true when the data loads, and false when the data finishes loading.


Related Issues

#100

Please create an angular component for the loader rather than rewriting the markup repeatedly.

rebased onto d2ec679c87836c7213ca412e2c127267ee018f9e

2 years ago

My apologies, I didn't realize you wanted this to be a part of an Angular component. I updated my commit so that it now utilizes the LoaderComponent.

I can't find the CSS of loader. Did you forget to include it?

The CSS of the loader is in the app.scss file. Should I move it to another folder?

Yes. Create a new file and Move it to the same component folder :)

rebased onto f0155c93d6dc8ab7e4930c96b6f5bf1a8d3747e8

2 years ago

OK, I updated my commit with the changes.

hide the loader when the carousel images have been loaded since they take more time than the posts.

rebased onto 6b7f7e0fe714d70439b86343665bdaff12d639ec

2 years ago

Fixed. The loader now only shows when the blog posts are loading.

Use only one instance of the loader and that only on the top of the carousel images

Use only one instance of the loader.

hide loader when the images are done being fetched

@akashbhave

I guess there is a little confusion.
So there are 3 things happening on the homepage:
1. Images are fetched and shown in a slideshow at the top.
2. Social Media Feed is being fetched.
3. Blog Posts are being fetched.

We want to show/hide the loader when the 1. is done because images are of more size so if we hide the loader once all images have been loaded, social media posts and blog posts must have been fetched already since they are small in size.

I hope this makes sense.

Oh got it, so you want me to show the loader only when the updateImages() function is called.

rebased onto 591ed845a3a5e88489498682bab94bb215f51b1b

2 years ago

@thelittlewonder Updated commit.

rebased onto 5d8cad9

2 years ago