Merge pull request #247 from valerymelou/feature/loading-animation

feat: add loader when navigating between pages
valerymelou · Jul 23, 2024 · b43c461 · b43c461
2 parents e1a6d82 + 0f6f8f7
commit b43c461
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 20 deletions.
diff --git a/libs/blog/feature-home/src/lib/blog-home.component.html b/libs/blog/feature-home/src/lib/blog-home.component.html
@@ -57,7 +57,7 @@ <h2 class="text-xl lg:max-w-2xl">
             </dl>
           </div>
           <a
-            class="text-accent-base group-hover:text-accent-base flex items-center text-sm dark:text-white dark:group-hover:text-white"
+            ui-link
             [routerLink]="[
               '/blog',
               (article.createdAt | date: 'YYYY-MM-dd') + '-' + article.slug,

diff --git a/libs/shared/layout/src/lib/logo/logo.component.html b/libs/shared/layout/src/lib/logo/logo.component.html
@@ -0,0 +1,13 @@
+<a href="/" class="relative flex items-center">
+  @if (loading) {
+    <div class="loader absolute"></div>
+  }
+
+  <img
+    src="/assets/images/valerymelou.jpg"
+    class="border-dark rounded-full border-2 dark:border-white"
+    alt="Valery Melou"
+    width="40"
+    height="40"
+  />
+</a>
diff --git a/libs/shared/layout/src/lib/logo/logo.component.spec.ts b/libs/shared/layout/src/lib/logo/logo.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LogoComponent } from './logo.component';
+
+describe('LogoComponent', () => {
+  let component: LogoComponent;
+  let fixture: ComponentFixture<LogoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LogoComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LogoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/libs/shared/layout/src/lib/logo/logo.component.ts b/libs/shared/layout/src/lib/logo/logo.component.ts
@@ -0,0 +1,143 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  NavigationEnd,
+  NavigationStart,
+  RouteConfigLoadEnd,
+  RouteConfigLoadStart,
+  Router,
+} from '@angular/router';
+
+@Component({
+  selector: 'app-logo',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './logo.component.html',
+  styles: `
+    /* HTML: <div class="loader"></div> */
+    .loader {
+      width: 40px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      border: 2px solid #3754ed;
+      animation:
+        l20-1 0.8s infinite linear alternate,
+        l20-2 1.6s infinite linear;
+    }
+
+    @keyframes l20-1 {
+      0% {
+        clip-path: polygon(
+          50% 50%,
+          0 0,
+          50% 0%,
+          50% 0%,
+          50% 0%,
+          50% 0%,
+          50% 0%
+        );
+      }
+      12.5% {
+        clip-path: polygon(
+          50% 50%,
+          0 0,
+          50% 0%,
+          100% 0%,
+          100% 0%,
+          100% 0%,
+          100% 0%
+        );
+      }
+      25% {
+        clip-path: polygon(
+          50% 50%,
+          0 0,
+          50% 0%,
+          100% 0%,
+          100% 100%,
+          100% 100%,
+          100% 100%
+        );
+      }
+      50% {
+        clip-path: polygon(
+          50% 50%,
+          0 0,
+          50% 0%,
+          100% 0%,
+          100% 100%,
+          50% 100%,
+          0% 100%
+        );
+      }
+      62.5% {
+        clip-path: polygon(
+          50% 50%,
+          100% 0,
+          100% 0%,
+          100% 0%,
+          100% 100%,
+          50% 100%,
+          0% 100%
+        );
+      }
+      75% {
+        clip-path: polygon(
+          50% 50%,
+          100% 100%,
+          100% 100%,
+          100% 100%,
+          100% 100%,
+          50% 100%,
+          0% 100%
+        );
+      }
+      100% {
+        clip-path: polygon(
+          50% 50%,
+          50% 100%,
+          50% 100%,
+          50% 100%,
+          50% 100%,
+          50% 100%,
+          0% 100%
+        );
+      }
+    }
+    @keyframes l20-2 {
+      0% {
+        transform: scaleY(1) rotate(0deg);
+      }
+      49.99% {
+        transform: scaleY(1) rotate(135deg);
+      }
+      50% {
+        transform: scaleY(-1) rotate(0deg);
+      }
+      100% {
+        transform: scaleY(-1) rotate(-135deg);
+      }
+    }
+  `,
+})
+export class LogoComponent {
+  loading = false;
+
+  constructor(router: Router) {
+    router.events.subscribe({
+      next: (event) => {
+        if (
+          event instanceof NavigationStart ||
+          event instanceof RouteConfigLoadStart
+        ) {
+          this.loading = true;
+        } else if (
+          event instanceof NavigationEnd ||
+          event instanceof RouteConfigLoadEnd
+        ) {
+          this.loading = false;
+        }
+      },
+    });
+  }
+}
diff --git a/libs/shared/layout/src/lib/navbar/navbar.component.html b/libs/shared/layout/src/lib/navbar/navbar.component.html
@@ -1,13 +1,5 @@
 <div class="fixed left-0 right-0 top-0 z-10 flex p-5 lg:hidden">
-  <a href="/" class="flex items-center">
-    <img
-      src="/assets/images/valerymelou.jpg"
-      class="border-dark rounded-full border-2 dark:border-white"
-      alt="Valery Melou"
-      width="40"
-      height="40"
-    />
-  </a>
+  <app-logo></app-logo>
 
   <button
     class="ml-auto items-center text-black dark:text-white"

diff --git a/libs/shared/layout/src/lib/navbar/navbar.component.ts b/libs/shared/layout/src/lib/navbar/navbar.component.ts
@@ -14,6 +14,7 @@ import {
 
 import { MenuComponent, MenuTriggerForDirective } from '@valerymelou/shared/ui';
 import { SocialLinksComponent } from '../social-links/social-links.component';
+import { LogoComponent } from '../logo/logo.component';
 
 interface NavbarLink {
   label: string;
@@ -27,6 +28,7 @@ interface NavbarLink {
     CommonModule,
     RouterModule,
     NgIconComponent,
+    LogoComponent,
     MenuComponent,
     MenuTriggerForDirective,
     SocialLinksComponent,

diff --git a/libs/shared/layout/src/lib/social-bar/social-bar.component.html b/libs/shared/layout/src/lib/social-bar/social-bar.component.html
@@ -5,15 +5,7 @@
     'lg:dark:bg-dark bg-transparent px-4 lg:bg-white': !isHome,
   }"
 >
-  <a href="/" class="flex items-center">
-    <img
-      src="/assets/images/valerymelou.jpg"
-      class="border-dark rounded-full border-2 dark:border-white"
-      alt="Valery Melou"
-      width="40"
-      height="40"
-    />
-  </a>
+  <app-logo></app-logo>
 
   @if (!isHome) {
     <a

diff --git a/libs/shared/layout/src/lib/social-bar/social-bar.component.ts b/libs/shared/layout/src/lib/social-bar/social-bar.component.ts
@@ -20,6 +20,7 @@ import {
 
 import { MenuComponent, MenuTriggerForDirective } from '@valerymelou/shared/ui';
 import { SocialLinksComponent } from '../social-links/social-links.component';
+import { LogoComponent } from '../logo/logo.component';
 
 @Component({
   selector: 'app-social-bar',
@@ -28,6 +29,7 @@ import { SocialLinksComponent } from '../social-links/social-links.component';
     CommonModule,
     RouterModule,
     NgIconComponent,
+    LogoComponent,
     MenuTriggerForDirective,
     MenuComponent,
     SocialLinksComponent,

diff --git a/nx.json b/nx.json
@@ -72,6 +72,9 @@
     "@nx/angular:library": {
       "linter": "eslint",
       "unitTestRunner": "jest"
+    },
+    "@nx/angular:component": {
+      "style": "none"
     }
   },
   "plugins": [

diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -15,10 +15,10 @@
     "skipDefaultLibCheck": true,
     "baseUrl": ".",
     "paths": {
+      "@valerymelou/blog-tasks": ["libs/blog/tasks/src/index.ts"],
       "@valerymelou/blog/article": ["libs/blog/feature-article/src/index.ts"],
       "@valerymelou/blog/data-access": ["libs/blog/data-access/src/index.ts"],
       "@valerymelou/blog/home": ["libs/blog/feature-home/src/index.ts"],
-      "@valerymelou/blog-tasks": ["libs/blog/tasks/src/index.ts"],
       "@valerymelou/cms/contentful": ["libs/cms/contentful/src/index.ts"],
       "@valerymelou/common/browser": ["libs/common/browser/src/index.ts"],
       "@valerymelou/pages/about": ["libs/pages/about/src/index.ts"],