diff --git a/src/app/components/documentation/documentation.component.scss b/src/app/components/documentation/documentation.component.scss
index cea36562..3f8cb456 100644
--- a/src/app/components/documentation/documentation.component.scss
+++ b/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;
diff --git a/src/app/components/documentation/documentation.component.ts b/src/app/components/documentation/documentation.component.ts
index d6e198a2..bfff572d 100644
--- a/src/app/components/documentation/documentation.component.ts
+++ b/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));
diff --git a/src/app/ui-kit/loader/index.ts b/src/app/ui-kit/loader/index.ts
new file mode 100644
index 00000000..b9d06d8a
--- /dev/null
+++ b/src/app/ui-kit/loader/index.ts
@@ -0,0 +1,2 @@
+export * from './loader.component';
+export * from './loader.module';
diff --git a/src/app/ui-kit/loader/loader.component.html b/src/app/ui-kit/loader/loader.component.html
new file mode 100644
index 00000000..ca7b0a25
--- /dev/null
+++ b/src/app/ui-kit/loader/loader.component.html
@@ -0,0 +1,3 @@
+
diff --git a/src/app/ui-kit/loader/loader.component.scss b/src/app/ui-kit/loader/loader.component.scss
new file mode 100644
index 00000000..9a10b13e
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/app/ui-kit/loader/loader.component.spec.ts b/src/app/ui-kit/loader/loader.component.spec.ts
new file mode 100644
index 00000000..76c51d54
--- /dev/null
+++ b/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
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [LoaderComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(LoaderComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/ui-kit/loader/loader.component.ts b/src/app/ui-kit/loader/loader.component.ts
new file mode 100644
index 00000000..bce8e67d
--- /dev/null
+++ b/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 {}
diff --git a/src/app/ui-kit/loader/loader.module.ts b/src/app/ui-kit/loader/loader.module.ts
new file mode 100644
index 00000000..925d2b27
--- /dev/null
+++ b/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 {}
diff --git a/src/app/ui-kit/ui-kit.module.ts b/src/app/ui-kit/ui-kit.module.ts
index b22da923..57d715cd 100644
--- a/src/app/ui-kit/ui-kit.module.ts
+++ b/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,7 +16,7 @@ import { ModalComponent } from './modal';
PaginationComponent,
ModalComponent,
],
- imports: [FormsModule, CommonModule],
+ imports: [FormsModule, CommonModule, LoaderModule],
exports: [
RedirectLinkButtonComponent,
SearchBoxComponent,
@@ -23,6 +24,7 @@ import { ModalComponent } from './modal';
FormsModule,
PaginationComponent,
ModalComponent,
+ LoaderComponent,
],
providers: [],
})