PR#91: [WIP] Add homepage loader - Fedora-app

Fedora-app

#91 [WIP] Add homepage loader

Closed 6 years ago by thelittlewonder. Opened 6 years ago by thelittlewonder.

thelittlewonder/Fedora-app loader into master

Abhishek Sharma • 6 years ago

ed798a9

src/app/app.scss

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`

src/pages/home/home.html

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`

src/providers/fedora-magazine/fedora-magazine.ts

file modified

+5 -2

		`@@ -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';`
amitosh commented 6 years ago 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');`
		`+ });`
		`}`
		`}`

src/utils.ts

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 {`
amitosh commented 6 years ago 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`