💄 add some loading transition

richard-unterberg · Jan 2, 2024 · e765de4 · e765de4
1 parent 8a17d02
commit e765de4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/layouts/LayoutDefault.tsx b/layouts/LayoutDefault.tsx
@@ -21,7 +21,7 @@ const LayoutDefault = ({
       <div className="max-w-4xl m-auto text-light">
         <div className="relative container px-5 mx-auto text-white text-base">
           <Header />
-          <div>{children}</div>
+          <div className="page-portal">{children}</div>
           <Footer />
         </div>
       </div>

diff --git a/layouts/styles.css b/layouts/styles.css
@@ -4,4 +4,14 @@
 
 body {
     background-color: var(--tw-dark);
+}
+
+.page-portal {
+    opacity: 1;
+    transition: opacity 0.5s ease-in-out;
+}
+
+body.page-is-transitioning .page-portal {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
 }