feat: complete WEB-5319 preloader for articles

src/app/components/documentation/documentation.component.html

@@ -32,15 +32,16 @@
             </div>
             <gc-bread-crumbs class="bread-crumbs" [items]="breadCrumbs"></gc-bread-crumbs>
 
+            <gcore-loader *ngIf="!isArticleReady"></gcore-loader>
+
             <div class="scully-container" #scullyContainer>
                 <ng-container>
                     <scully-content></scully-content>
                 </ng-container>
             </div>
 
-            <div class="separator-line doc-separator-line"></div>
-
             <div class="doc-estimate">
+                <div class="separator-line doc-separator-line"></div>
                 <p class="doc-estimate-title">Was this article helpful?</p>
                 <p class="doc-estimate-thanks" *ngIf="isArticleRated">Thanks for the rating!</p>
                 <div class="doc-estimate-wrapper" *ngIf="!isArticleRated">

src/app/components/documentation/documentation.component.scss

@@ -1,5 +1,11 @@
 @import '../../../scss/variables';
 
+gcore-loader {
+    ::ng-deep.dot-flashing {
+        margin: 0 auto;
+    }
+}
+
 .doc-wrapper {
     display: flex;
     align-items: stretch;
@@ -26,6 +32,9 @@
     }
 
     .doc-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         width: 100%;
         max-width: 43rem;
         margin: 0 auto;

src/app/components/documentation/documentation.component.ts

@@ -49,6 +49,7 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
     public activeTab: string;
     public baseHref: string = environment.baseHref;
     public isArticleRated: boolean = false;
+    public isArticleReady: boolean = false;
 
     private routerSubscription: Subscription;
 
@@ -73,6 +74,14 @@ export class DocumentationComponent implements OnInit, AfterViewChecked, OnDestr
         });
 
         if (this.scullyContainer.nativeElement) {
+            if (this.scullyContainer.nativeElement.childElementCount > 1) {
+                this.isArticleReady = true;
+                this.changeDetectorRef.detectChanges();
+            } else {
+                this.isArticleReady = false;
+                this.changeDetectorRef.detectChanges();
+            }
+
             this.scullyContainer.nativeElement.querySelectorAll(':not(.gc-gallery p) > img').forEach((img: Element) => {
                 this.ngZone.runOutsideAngular(() => {
                     this.renderer.listen(img, 'click', (event) => this.expandImage(event));

src/app/ui-kit/loader/index.ts

@@ -0,0 +1,2 @@
+export * from './loader.component';
+export * from './loader.module';

src/app/ui-kit/loader/loader.component.html

@@ -0,0 +1,3 @@
+<div class="gc-flex gc-flex-h-center gc-p-section-vertical">
+    <div class="dot-flashing"></div>
+</div>

src/app/ui-kit/loader/loader.component.scss

@@ -0,0 +1,57 @@
+@import '../../../scss/variables.scss';
+
+/**
+ * ==============================================
+ * Dot Flashing https://codepen.io/nzbin/pen/GGrXbp
+ * ==============================================
+ */
+.dot-flashing {
+    position: relative;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: $contentLink;
+    color: $contentLink;
+    animation: dotFlashing 1s infinite linear alternate;
+    animation-delay: 0.5s;
+}
+
+.dot-flashing::before,
+.dot-flashing::after {
+    content: '';
+    display: inline-block;
+    position: absolute;
+    top: 0;
+}
+
+.dot-flashing::before {
+    left: -15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: $contentLink;
+    color: $contentLink;
+    animation: dotFlashing 1s infinite alternate;
+    animation-delay: 0s;
+}
+
+.dot-flashing::after {
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    background-color: $contentLink;
+    color: $contentLink;
+    animation: dotFlashing 1s infinite alternate;
+    animation-delay: 1s;
+}
+
+@keyframes dotFlashing {
+    0% {
+        background-color: $contentLink;
+    }
+    50%,
+    100% {
+        background-color: #fff;
+    }
+}

src/app/ui-kit/loader/loader.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+    let component: LoaderComponent;
+    let fixture: ComponentFixture<LoaderComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            declarations: [LoaderComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(LoaderComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

src/app/ui-kit/loader/loader.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    selector: 'gcore-loader',
+    templateUrl: './loader.component.html',
+    styleUrls: ['./loader.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LoaderComponent {}

src/app/ui-kit/loader/loader.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LoaderComponent } from './loader.component';
+
+@NgModule({
+    declarations: [LoaderComponent],
+    imports: [CommonModule],
+    exports: [LoaderComponent],
+})
+export class LoaderModule {}

src/app/ui-kit/ui-kit.module.ts

@@ -6,6 +6,7 @@ import { SearchBoxComponent } from './search-box/search-box.component';
 import { CallToActionBoxComponent } from './call-to-action-box/call-to-action-box.component';
 import { PaginationComponent } from './pagination';
 import { ModalComponent } from './modal';
+import { LoaderComponent, LoaderModule } from './loader';
 
 @NgModule({
     declarations: [
@@ -15,14 +16,15 @@ import { ModalComponent } from './modal';
         PaginationComponent,
         ModalComponent,
     ],
-    imports: [FormsModule, CommonModule],
+    imports: [FormsModule, CommonModule, LoaderModule],
     exports: [
         RedirectLinkButtonComponent,
         SearchBoxComponent,
         CallToActionBoxComponent,
         FormsModule,
         PaginationComponent,
         ModalComponent,
+        LoaderComponent,
     ],
     providers: [],
 })