[FEATURE]: improve user experience (slow 3G) with page transitions wh…

…en fetching data (#68) * feature: needed native tailwind colours for gradient map effect * feature: page transition for fetching data--gradient map
kwicherbelliaken · Mar 19, 2023 · bc5a5b3 · bc5a5b3
1 parent d00fa86
commit bc5a5b3
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 65 deletions.
diff --git a/app/components/pageTransition/GradientMapTransition.tsx b/app/components/pageTransition/GradientMapTransition.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { PropsWithChildren } from "react";
+import { useTransition } from "@remix-run/react";
+import classNames from "classnames";
+
+const GradientMapTransition = ({
+  children,
+  classNameProps,
+}: PropsWithChildren<{ classNameProps?: Array<string> }>) => {
+  const transition = useTransition();
+
+  if (transition.state === "loading") {
+    return (
+      <div className={classNames(classNameProps?.join(" "))}>
+        <div className="h-full w-full animate-ping bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-rose-100 to-teal-100" />
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+};
+
+export default GradientMapTransition;
diff --git a/app/components/pageTransition/index.ts b/app/components/pageTransition/index.ts
@@ -1,4 +1,9 @@
 import MorphingTransition from "./MorphingTransition";
 import FlowerBlobTransition from "./FlowerBlobTransition";
+import GradientMapTransition from "./GradientMapTransition";
 
-export { MorphingTransition, FlowerBlobTransition };
+export default {
+  MorphingTransition,
+  FlowerBlobTransition,
+  GradientMapTransition,
+};
diff --git a/app/routes/braindumps.list.$braindumpId.tsx b/app/routes/braindumps.list.$braindumpId.tsx
@@ -10,7 +10,7 @@ import Paragraph from "~/components/Paragraph";
 import Title from "~/components/Title";
 import CodeBlock from "~/components/CodeBlock";
 import A from "~/components/A";
-import { FlowerBlobTransition } from "~/components/pageTransition";
+import PageTransition from "~/components/pageTransition";
 
 //? TYPES
 import type { PropsWithChildren } from "react";
@@ -193,7 +193,7 @@ export default function BraindumpIndex() {
 
   return (
     <div className="relative">
-      <FlowerBlobTransition
+      <PageTransition.FlowerBlobTransition
         key={braindumpMeta["id"]}
         animationKey={braindumpMeta["id"]}
       >
@@ -206,7 +206,7 @@ export default function BraindumpIndex() {
             </div>
           </InnerLayout>
         </div>
-      </FlowerBlobTransition>
+      </PageTransition.FlowerBlobTransition>
     </div>
   );
 }

diff --git a/app/routes/braindumps/index.tsx b/app/routes/braindumps/index.tsx
@@ -1,12 +1,15 @@
+import React from "react";
+import { Link } from "@remix-run/react";
+
+//? components
 import Title from "~/components/Title";
+import Layout from "~/components/Layout";
 import { AnimatedButton } from "~/components/button";
-import { Link } from "@remix-run/react";
+import PageTransition from "~/components/pageTransition";
 
 const Introduction = () => {
-  //! NB: h-[calc(100vh-4rem)] needed to explicitly set the height otherwise we get scrollbars
-  //! https://github.com/slackermorris/better-brain-blogging/issues/10#issuecomment-1437429507
   return (
-    <div className="flex h-[calc(100vh-4rem)] w-2/3">
+    <Layout.FullHeight classNameProp={["w-2/3"]}>
       <div className="flex flex-col space-y-32 p-16">
         <Title.H3>
           Inside is a collection of braindumps. These are things I have tried to
@@ -25,10 +28,16 @@ const Introduction = () => {
           </Link>
         </div>
       </div>
-    </div>
+    </Layout.FullHeight>
   );
 };
 
 export default function BraindumpsIndex() {
-  return <Introduction />;
+  return (
+    <PageTransition.GradientMapTransition
+      classNameProps={["h-[calc(100vh-4rem)]", "w-2/3", "overflow-hidden"]}
+    >
+      <Introduction />
+    </PageTransition.GradientMapTransition>
+  );
 }
diff --git a/app/routes/braindumps/list.tsx b/app/routes/braindumps/list.tsx
@@ -6,10 +6,11 @@ import notionClient from "~/integrations/notion";
 import { retrieveBraindumpsFromNotionDatabase } from "./notion-crm";
 
 //? COMPONENTS
-import { Link } from "@remix-run/react";
 import P from "~/components/P";
 import Title from "~/components/Title";
-import { MorphingTransition } from "~/components/pageTransition";
+import { Link } from "@remix-run/react";
+import Layout from "~/components/Layout";
+import PageTransition from "~/components/pageTransition";
 
 // @ts-ignore
 // ! EXPORT PROPER TYPE DEFINITONS
@@ -28,7 +29,6 @@ import type { NotionDatabaseAPIMapperResponse } from "./notion-crm";
 // @ts-ignore
 // ! EXPORT PROPER TYPE DEFINITONS
 import fuzzyScrawlStyles from "fuzzy-scrawl-styles";
-import Layout from "../../components/Layout";
 
 type ThrownResponses = ThrownResponse<404, string>;
 
@@ -94,59 +94,63 @@ export default function BraindumpsList() {
   if (!braindumps) return null;
 
   return (
-    <Layout.FullHeight classNameProp={["w-2/3"]}>
-      <MorphingTransition>
-        <div className="p-24">
-          {Object.entries(braindumps).map(
-            (
-              [category, relatedBraindumps]: [
-                category: string,
-                relatedBraindumps: NotionDatabaseAPIMapperResponse
-              ],
-              keyOfCategories: number
-            ) => {
-              return (
-                <div key={keyOfCategories} className="w-full pb-8">
-                  <Title.H3
-                    styleProps={[
-                      "py-3.5",
-                      "text-4xl",
-                      "font-extrabold",
-                      "uppercase",
-                      "tracking-tight",
-                    ]}
-                  >
-                    {category}
-                  </Title.H3>
-
-                  <div className="bg-white pl-3.5">
-                    {relatedBraindumps.map(
-                      (
-                        braindump: NotionDatabaseAPIMapperResponse[0],
-                        index: number,
-                        braindumps: NotionDatabaseAPIMapperResponse
-                      ) => {
-                        const showFuzzyScrawl =
-                          index ===
-                          Math.floor(Math.random() * braindumps.length);
-
-                        return (
-                          <BraindumpDetails
-                            key={index}
-                            braindump={braindump}
-                            showFuzzyScrawl={showFuzzyScrawl}
-                          />
-                        );
-                      }
-                    )}
+    <PageTransition.GradientMapTransition
+      classNameProps={["h-[calc(100vh-4rem)]", "w-2/3", "overflow-hidden"]}
+    >
+      <Layout.FullHeight classNameProp={["w-2/3"]}>
+        <PageTransition.MorphingTransition>
+          <div className="p-24">
+            {Object.entries(braindumps).map(
+              (
+                [category, relatedBraindumps]: [
+                  category: string,
+                  relatedBraindumps: NotionDatabaseAPIMapperResponse
+                ],
+                keyOfCategories: number
+              ) => {
+                return (
+                  <div key={keyOfCategories} className="w-full pb-8">
+                    <Title.H3
+                      styleProps={[
+                        "py-3.5",
+                        "text-4xl",
+                        "font-extrabold",
+                        "uppercase",
+                        "tracking-tight",
+                      ]}
+                    >
+                      {category}
+                    </Title.H3>
+
+                    <div className="bg-white pl-3.5">
+                      {relatedBraindumps.map(
+                        (
+                          braindump: NotionDatabaseAPIMapperResponse[0],
+                          index: number,
+                          braindumps: NotionDatabaseAPIMapperResponse
+                        ) => {
+                          const showFuzzyScrawl =
+                            index ===
+                            Math.floor(Math.random() * braindumps.length);
+
+                          return (
+                            <BraindumpDetails
+                              key={index}
+                              braindump={braindump}
+                              showFuzzyScrawl={showFuzzyScrawl}
+                            />
+                          );
+                        }
+                      )}
+                    </div>
                   </div>
-                </div>
-              );
-            }
-          )}
-        </div>
-      </MorphingTransition>
-    </Layout.FullHeight>
+                );
+              }
+            )}
+          </div>
+        </PageTransition.MorphingTransition>
+      </Layout.FullHeight>
+    </PageTransition.GradientMapTransition>
   );
 }
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,6 +21,8 @@ module.exports = {
     },
     colors: {
       black: colors.black,
+      rose: colors.rose,
+      teal: colors.teal,
       graphite: {
         lightest: "#E1DFE1",
         light: "#C7C7C7",