PR#117: Fix #100 - Show loader when data loads - Fedora-app

Fedora-app

#117 Fix #100 - Show loader when data loads

Opened 5 years ago by akashbhave. Modified 5 years ago

akashbhave/Fedora-app master into master

Fix #100 - Show loader when data loads

AkashBhave • 5 years ago

5d8cad9

src/app/app.module.ts

file modified

		`@@ -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`
		`],`

src/app/app.scss

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;`
		`}`

src/components/components.module.ts

file added

		`@@ -0,0 +1,8 @@`
		`+ import { NgModule } from '@angular/core';`
		`+ import { LoaderComponent } from './loader/loader';`
		`+ @NgModule({`
		`+ declarations: [LoaderComponent],`
		`+ imports: [],`
		`+ exports: [LoaderComponent]`
		`+ })`
		`+ export class ComponentsModule {}`

src/components/loader/loader.html

file added

		`@@ -0,0 +1,6 @@`
		`+ <div class="loader" id="home-ld">`
thelittlewonder commented 5 years ago 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`

src/components/loader/loader.scss

file added

+80

		`@@ -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;`
		`+ }`

src/components/loader/loader.ts

file added

+12

		`@@ -0,0 +1,12 @@`
		`+ import { Component } from '@angular/core';`
		`+`
		`+ @Component({`
		`+ selector: 'loader',`
		`+ templateUrl: 'loader.html'`
		`+ })`
		`+ export class LoaderComponent {`
		`+`
		`+ constructor() {`
		`+ }`
		`+`
		`+ }`

src/pages/ask/ask.html

file modified

		`@@ -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)">`

src/pages/ask/ask.ts

file modified

		`@@ -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;`
		`});`
		`}`

src/pages/calendar/calendar.html

file modified

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

src/pages/calendar/calendar.ts

file modified

		`@@ -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;`
		`});`
		`}`

src/pages/home/home.html

file modified

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

src/pages/home/home.ts

file modified

		`@@ -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;`
		`});`
		`}`

src/pages/magazine/magazine.html

file modified

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

src/pages/magazine/magazine.ts

file modified

		`@@ -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;`
		`});`
		`}`

src/pages/more/more.ts

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`

src/pages/more/podcast-player.html

file modified

+1 -6

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

src/pages/more/women-diversity.html

file modified

		`@@ -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)">`

akashbhave commented 5 years ago

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

thelittlewonder commented on line 5 of src/pages/ask/ask.html 5 years ago

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

rebased onto d2ec679c87836c7213ca412e2c127267ee018f9e

5 years ago

akashbhave commented 5 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.

thelittlewonder commented on line 2 of src/components/loader/loader.html 5 years ago

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

akashbhave commented 5 years ago

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

Edited 5 years ago by akashbhave

thelittlewonder commented 5 years ago

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

rebased onto f0155c93d6dc8ab7e4930c96b6f5bf1a8d3747e8

5 years ago

akashbhave commented 5 years ago

OK, I updated my commit with the changes.

thelittlewonder commented on line 33 of src/pages/home/home.ts 5 years ago

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

rebased onto 6b7f7e0fe714d70439b86343665bdaff12d639ec

5 years ago

akashbhave commented 5 years ago

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

thelittlewonder commented on line 5 of src/pages/home/home.html 5 years ago

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

thelittlewonder commented on line 13 of src/pages/home/home.html 5 years ago

Use only one instance of the loader.

thelittlewonder commented on line 21 of src/pages/home/home.ts 5 years ago

hide loader when the images are done being fetched

thelittlewonder commented 5 years ago

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

akashbhave commented 5 years ago

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

rebased onto 591ed845a3a5e88489498682bab94bb215f51b1b

5 years ago

akashbhave commented 5 years ago

@thelittlewonder Updated commit.

Edited 5 years ago by akashbhave

rebased onto 5d8cad9

5 years ago

thelittlewonder commented 5 years ago

Looks good to me!