socialnetworknews-web

commit 25ed6117458ebbf0f2d01e584306eee1212c9c66
parent 6de06077e8012528e83a4cba3325b697ef9f0ce1
Author: MTRNord <mtrnord1@gmail.com>
Date:   Fri, 23 Mar 2018 15:35:31 +0100

Try using a spinner on http loading

Diffstat:
M
package.json
 | 
1
+
M
src/app/app.component.ts
 | 
2
++
M
src/app/app.module.ts
 | 
8
+++++++-
M
src/app/papers-list/papers-list.component.html
 | 
1
+
A
src/app/spinner/spinner.component.html
 | 
1
+
A
src/app/spinner/spinner.component.scss
 | 
29
+++++++++++++++++++++++++++++
A
src/app/spinner/spinner.component.spec.ts
 | 
25
+++++++++++++++++++++++++
A
src/app/spinner/spinner.component.ts
 | 
10
++++++++++
M
src/app/tweet-list/tweet-list.component.html
 | 
1
+
M
yarn.lock
 | 
4
++++

10 files changed, 81 insertions(+), 1 deletion(-)
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "express": "^4.16.2",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
+    "ng-http-loader": "^0.9.0",
     "ngx-avatar": "^2.9.0",
     "ngx-toastr": "^8.3.0",
     "raven-js": "^3.22.3",
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {SpinnerComponent} from './spinner/spinner.component';
 
 @Component({
   selector: 'app-root',
@@ -6,4 +7,5 @@ import {Component} from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+  public spinner = SpinnerComponent;
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -17,6 +17,8 @@ import { ApiService } from './api.service';
 import * as Raven from 'raven-js';
 import {ToastrModule} from 'ngx-toastr';
 import { CardComponent } from './card/card.component';
+import {NgHttpLoaderModule} from 'ng-http-loader/ng-http-loader.module';
+import { SpinnerComponent } from './spinner/spinner.component';
 Raven
   .config('https://b760c9f9035c472998ada3a02dcc81d3@sentry.io/294520', {
     environment: 'development',
@@ -52,12 +54,16 @@ export class RavenErrorHandler implements ErrorHandler {
     BrowserAnimationsModule,
     AvatarModule,
     HttpClientModule,
+    NgHttpLoaderModule,
     ToastrModule.forRoot(), // ToastrModule added
   ],
   providers: [
     ApiService,
     { provide: ErrorHandler, useClass: RavenErrorHandler }
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [
+    SpinnerComponent,
+  ],
 })
 export class AppModule { }
diff --git a/src/app/papers-list/papers-list.component.html b/src/app/papers-list/papers-list.component.html
@@ -1,3 +1,4 @@
+<spinner spinner="spinner"></spinner>
 <div class="grid">
   <app-card *ngFor="let item of data" [title]="item.name" [link]="'/paper/'+item.uuid" [image]="item.paper_image" [text]="item.description"></app-card>
 </div>
diff --git a/src/app/spinner/spinner.component.html b/src/app/spinner/spinner.component.html
@@ -0,0 +1 @@
+<div class="spinner"></div>
diff --git a/src/app/spinner/spinner.component.scss b/src/app/spinner/spinner.component.scss
@@ -0,0 +1,29 @@
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 100px auto;
+  background-color: #333;
+
+  border-radius: 100%;
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+      -webkit-transform: scale(1.0);
+      transform: scale(1.0);
+      opacity: 0;
+    }
+}
diff --git a/src/app/spinner/spinner.component.spec.ts b/src/app/spinner/spinner.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpinnerComponent } from './spinner.component';
+
+describe('SpinnerComponent', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SpinnerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/spinner/spinner.component.ts b/src/app/spinner/spinner.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import {AbstractLoader} from 'ng-http-loader/components/abstract.loader.component';
+
+@Component({
+  selector: 'app-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+export class SpinnerComponent extends AbstractLoader {
+}
diff --git a/src/app/tweet-list/tweet-list.component.html b/src/app/tweet-list/tweet-list.component.html
@@ -1,3 +1,4 @@
+<spinner  spinner="spinner"></spinner>
 <div class="grid">
   <ng-container *ngFor="let item of data">
     <app-card *ngIf="item.image_urls" [title]="item.display_name" [image]="item.image_urls[0]" [text]="item.text" [retweet]="item.retweet" [retweets]="item.retweets" [created_at]="item.created_at" [favs]="item.favorites"></app-card>
diff --git a/yarn.lock b/yarn.lock
@@ -4085,6 +4085,10 @@ next-tick@1:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
 
+ng-http-loader@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/ng-http-loader/-/ng-http-loader-0.9.0.tgz#ea9b013cd7f3318f8e0eb4bf86157d6524d2c8e9"
+
 ngx-avatar@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/ngx-avatar/-/ngx-avatar-2.9.0.tgz#7dbeea19c0ea1657040f52afefb1dfa3c661ff46"