fix: remove page fade in to prevent flickering of pre-rendered pages

pascaliske · Jul 20, 2023 · 73bb801 · 73bb801
1 parent 50a8ae2
commit 73bb801
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 29 deletions.
diff --git a/src/app/app.animations.ts b/src/app/app.animations.ts
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,13 +1,11 @@
 <ng-progress aria-label="Page Load Progress" #progress></ng-progress>
 
-<div [@fade]="true">
-    <div class="flex min-h-[100dvh] w-screen flex-col p-10 sm:px-24 sm:py-12 lg:px-48 lg:py-24">
-        <cmp-navigation></cmp-navigation>
-        <div class="flex flex-1 flex-col py-20">
-            <router-outlet></router-outlet>
-        </div>
-        <cmp-footer></cmp-footer>
+<div class="flex min-h-[100dvh] w-screen flex-col p-10 sm:px-24 sm:py-12 lg:px-48 lg:py-24">
+    <cmp-navigation></cmp-navigation>
+    <div class="flex flex-1 flex-col py-20">
+        <router-outlet></router-outlet>
     </div>
-
-    <cmp-triangle></cmp-triangle>
+    <cmp-footer></cmp-footer>
 </div>
+
+<cmp-triangle></cmp-triangle>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -6,7 +6,6 @@ import { ThemeService } from 'shared/theme/theme.service'
 import { NavigationComponent } from 'components/navigation/navigation.component'
 import { FooterComponent } from 'components/footer/footer.component'
 import { TriangleComponent } from 'components/triangle/triangle.component'
-import { animations } from './app.animations'
 
 @Component({
     standalone: true,
@@ -20,7 +19,6 @@ import { animations } from './app.animations'
         FooterComponent,
         TriangleComponent,
     ],
-    animations,
 })
 export class AppComponent implements OnInit {
     private readonly destroy: DestroyRef = inject(DestroyRef)

diff --git a/src/styles/common.css b/src/styles/common.css
@@ -50,7 +50,12 @@
         @apply transition-[background-color] duration-300;
     }
 
-    h1, h2, h3, h4, h5, h6 {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         @apply font-bold;
     }
 
@@ -88,10 +93,26 @@
         @apply text-bitterSweet text-opacity-80 transition-colors duration-300 hover:text-opacity-100;
     }
 
-    input, textarea, select {
+    input,
+    textarea,
+    select {
         @apply border-[0];
         outline: none;
     }
+
+    fa-icon svg {
+        display: inline-block;
+        font-size: inherit;
+        height: 1em;
+    }
+
+    fa-icon .fa-2x {
+        font-size: 2em;
+    }
+
+    .svg-inline--fa {
+        vertical-align: -0.125em;
+    }
 }
 
 @layer components {