From 5d8cad9891c7c7d2b142e5aac21b96638562fe0e Mon Sep 17 00:00:00 2001 From: AkashBhave Date: Oct 27 2018 14:36:48 +0000 Subject: Fix #100 - Show loader when data loads --- diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1a1d5ea..f0b8e1c 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -24,6 +24,7 @@ import { NoBookmarksComponent } from '../components/no-bookmarks/no-bookmarks'; 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 @@ import { Browser } from '../providers/browser/browser'; NoMeetingsComponent, NoResultsComponent, NoInternetComponent, + LoaderComponent, FedoraPodcast, PodcastPlayer ], diff --git a/src/app/app.scss b/src/app/app.scss index 56a80ef..02c0d65 100755 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -196,78 +196,6 @@ ion-segment { } } -//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; } diff --git a/src/components/components.module.ts b/src/components/components.module.ts new file mode 100644 index 0000000..38908b9 --- /dev/null +++ b/src/components/components.module.ts @@ -0,0 +1,8 @@ +import { NgModule } from '@angular/core'; +import { LoaderComponent } from './loader/loader'; +@NgModule({ + declarations: [LoaderComponent], + imports: [], + exports: [LoaderComponent] +}) +export class ComponentsModule {} diff --git a/src/components/loader/loader.html b/src/components/loader/loader.html new file mode 100644 index 0000000..f1a80e1 --- /dev/null +++ b/src/components/loader/loader.html @@ -0,0 +1,6 @@ +
+
+
+
+
+
\ No newline at end of file diff --git a/src/components/loader/loader.scss b/src/components/loader/loader.scss new file mode 100644 index 0000000..8ce2f51 --- /dev/null +++ b/src/components/loader/loader.scss @@ -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; +} diff --git a/src/components/loader/loader.ts b/src/components/loader/loader.ts new file mode 100644 index 0000000..2309fa0 --- /dev/null +++ b/src/components/loader/loader.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'loader', + templateUrl: 'loader.html' +}) +export class LoaderComponent { + + constructor() { + } + +} diff --git a/src/pages/ask/ask.html b/src/pages/ask/ask.html index 90a1389..ecc2ae5 100644 --- a/src/pages/ask/ask.html +++ b/src/pages/ask/ask.html @@ -22,6 +22,7 @@ Popular + diff --git a/src/pages/ask/ask.ts b/src/pages/ask/ask.ts index f24aa27..92668d6 100644 --- a/src/pages/ask/ask.ts +++ b/src/pages/ask/ask.ts @@ -23,6 +23,11 @@ export class AskPage { */ 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 @@ export class AskPage { * 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; }); } diff --git a/src/pages/calendar/calendar.html b/src/pages/calendar/calendar.html index 3c7aaff..8c10cf0 100644 --- a/src/pages/calendar/calendar.html +++ b/src/pages/calendar/calendar.html @@ -27,6 +27,7 @@ Past Events +
diff --git a/src/pages/calendar/calendar.ts b/src/pages/calendar/calendar.ts index 4e97e46..4c35299 100644 --- a/src/pages/calendar/calendar.ts +++ b/src/pages/calendar/calendar.ts @@ -39,6 +39,11 @@ export class CalendarPage { 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 @@ export class CalendarPage { * @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; }); } diff --git a/src/pages/home/home.html b/src/pages/home/home.html index 8facbf9..b940a5f 100644 --- a/src/pages/home/home.html +++ b/src/pages/home/home.html @@ -12,6 +12,7 @@ + diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts index c50495c..0857aac 100644 --- a/src/pages/home/home.ts +++ b/src/pages/home/home.ts @@ -41,6 +41,11 @@ export class HomePage { */ 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 @@ export class HomePage { * 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; }); } diff --git a/src/pages/magazine/magazine.html b/src/pages/magazine/magazine.html index e384403..1c27368 100644 --- a/src/pages/magazine/magazine.html +++ b/src/pages/magazine/magazine.html @@ -17,6 +17,7 @@ + diff --git a/src/pages/magazine/magazine.ts b/src/pages/magazine/magazine.ts index 2023c32..935297f 100644 --- a/src/pages/magazine/magazine.ts +++ b/src/pages/magazine/magazine.ts @@ -18,6 +18,11 @@ export class MagazinePage { * 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 @@ export class MagazinePage { * 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; }); } diff --git a/src/pages/more/more.ts b/src/pages/more/more.ts index eeed3b6..b94ba23 100755 --- a/src/pages/more/more.ts +++ b/src/pages/more/more.ts @@ -153,6 +153,11 @@ export class WomenDiversity { */ 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 @@ export class WomenDiversity { * 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 WomenDiversity { }) 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 @@ export class FedoraPodcast { * 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 diff --git a/src/pages/more/podcast-player.html b/src/pages/more/podcast-player.html index ee2edfc..915e3b9 100644 --- a/src/pages/more/podcast-player.html +++ b/src/pages/more/podcast-player.html @@ -10,12 +10,7 @@ Template for the Fedora Podcast Player -
-
-
-
-
-
+
diff --git a/src/pages/more/women-diversity.html b/src/pages/more/women-diversity.html index 7dbb33c..4eaa163 100755 --- a/src/pages/more/women-diversity.html +++ b/src/pages/more/women-diversity.html @@ -16,6 +16,7 @@ Template for the Women and Diversity Page if you need more information. Fedora Diversity and Inclusion team is committed to fostering diversity and inclusion in Fedora community.

+ Latest Updates