feat: optimize UI/UX performance (#63)

VeoScript · web-flow · commit 8052dcb96b5e · 2023-11-11T23:05:15.000+08:00
diff --git a/public/magaaazine.png b/public/magaaazine.png
diff --git a/public/magaaazine_pro.png b/public/magaaazine_pro.png
diff --git a/src/app/[username]/layout.tsx b/src/app/[username]/layout.tsx
@@ -1,11 +1,11 @@
-import DefaultLayout from "~/components/templates/DefaultLayout";
+import dynamic from "next/dynamic";
+
+const DefaultLayout = dynamic(() => import("~/components/templates/DefaultLayout"));
 
 export default function UserPageLayout({ children }: { children: React.ReactNode }) {
   return (
     <DefaultLayout>
-      <section className="relative flex w-full flex-col items-center">
-        {children}
-      </section>
+      <section className="relative flex w-full flex-col items-center">{children}</section>
     </DefaultLayout>
   );
 }
diff --git a/src/app/[username]/loading.tsx b/src/app/[username]/loading.tsx
@@ -0,0 +1,25 @@
+export default function Loading() {
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center">
+      <div className="flex w-full max-w-2xl flex-col items-center gap-y-10 px-5 pb-10">
+        <div className="h-[13rem] w-[13rem] animate-pulse rounded-full bg-neutral-300 object-cover" />
+        <div className="flex w-full flex-col items-center gap-y-2">
+          <div className="h-[2rem] w-[20rem] animate-pulse rounded-full bg-neutral-300" />
+          <div className="h-[1.5rem] w-[15rem] animate-pulse rounded-full bg-neutral-300" />
+        </div>
+        <div className="flex w-full flex-row items-center justify-center gap-x-2">
+          <div className="h-[2rem] w-[2rem] animate-pulse rounded-full bg-neutral-300" />
+          <div className="h-[2rem] w-[2rem] animate-pulse rounded-full bg-neutral-300" />
+          <div className="h-[2rem] w-[2rem] animate-pulse rounded-full bg-neutral-300" />
+          <div className="h-[2rem] w-[2rem] animate-pulse rounded-full bg-neutral-300" />
+          <div className="h-[2rem] w-[2rem] animate-pulse rounded-full bg-neutral-300" />
+        </div>
+        <div className="flex w-full flex-col items-center gap-y-3">
+          <div className="h-[2rem] w-[20rem] animate-pulse rounded-full bg-neutral-300" />
+          <div className="h-[1.5rem] w-full animate-pulse rounded-full bg-neutral-300" />
+        </div>
+        <div className="h-[15rem] w-full animate-pulse rounded-xl bg-neutral-300" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/[username]/page.tsx b/src/app/[username]/page.tsx
@@ -1,16 +1,18 @@
 import { Suspense } from "react";
 import { Metadata } from "next";
 import Image from "next/image";
+import dynamic from "next/dynamic";
 import clsx from "clsx";
 
 import getBase64 from "~/lib/functions/getBase64";
-import SocialMediaHolder from "~/components/molecules/SocialMediaHolder";
-import ProfileUpload from "~/components/molecules/Uploads/ProfileUpload";
-import CoverUpload from "~/components/molecules/Uploads/CoverUpload";
-import ProfileMainHolder from "~/components/molecules/ProfileMainHolder";
 
 import { serverClient } from "../_trpc/serverClient";
 
+const SocialMediaHolder = dynamic(() => import("~/components/molecules/SocialMediaHolder"));
+const ProfileUpload = dynamic(() => import("~/components/molecules/Uploads/ProfileUpload"));
+const CoverUpload = dynamic(() => import("~/components/molecules/Uploads/CoverUpload"));
+const ProfileMainHolder = dynamic(() => import("~/components/molecules/ProfileMainHolder"));
+
 export async function generateMetadata({
   params,
 }: {
@@ -167,7 +169,7 @@ export default async function UserPage({ params }: { params: { username: string
                 )}
               </div>
               {profile?.favorite_quote && (
-                <q className="text-center text-base">{profile?.favorite_quote}</q>
+                <q className="text-center text-xl font-light italic">{profile?.favorite_quote}</q>
               )}
               <ProfileMainHolder profile={profile} />
             </div>
diff --git a/src/app/discover/page.tsx b/src/app/discover/page.tsx
@@ -1,7 +1,9 @@
-import DiscoverList from "~/components/molecules/Lists/DiscoverList";
+import dynamic from "next/dynamic";
 
 import { serverClient } from "~/app/_trpc/serverClient";
 
+const DiscoverList = dynamic(() => import("~/components/molecules/Lists/DiscoverList"));
+
 export default async function Discover() {
   const usersData = await serverClient.users({
     cursor: "",
diff --git a/src/app/files-images/page.tsx b/src/app/files-images/page.tsx
@@ -1,7 +1,8 @@
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import dynamic from "next/dynamic";
 
-import FilesImagesList from "~/components/molecules/Lists/FilesImagesList";
+const FilesImagesList = dynamic(() => import("~/components/molecules/Lists/FilesImagesList"));
 
 import { serverClient } from "../_trpc/serverClient";
 
diff --git a/src/app/forgot-password/page.tsx b/src/app/forgot-password/page.tsx
@@ -1,8 +1,9 @@
 import { Metadata } from "next";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import dynamic from "next/dynamic";
 
-import ForgotPasswordForm from "~/components/molecules/Forms/ForgotPasswordForm";
+const ForgotPasswordForm = dynamic(() => import("~/components/molecules/Forms/ForgotPasswordForm"));
 
 export const metadata: Metadata = {
   title: "Magaaazine | Forgot Password?",
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
@@ -11,6 +11,7 @@ export default function Pricing() {
               className="h-[10rem] w-[10rem] rounded-full object-scale-down"
               src="/magaaazine.png"
               alt="magaaazine"
+              priority
               width={100}
               height={100}
               quality={100}
@@ -51,6 +52,7 @@ export default function Pricing() {
               className="h-[10rem] w-[10rem] rounded-full object-scale-down"
               src="/magaaazine_pro.png"
               alt="magaaazine_pro"
+              priority
               width={100}
               height={100}
               quality={100}
diff --git a/src/components/molecules/Lists/FilesImagesList.tsx b/src/components/molecules/Lists/FilesImagesList.tsx
@@ -4,16 +4,18 @@ import { useState, useEffect, Fragment } from "react";
 import { useInView } from "react-intersection-observer";
 import Link from "next/link";
 import Image from "next/legacy/image";
+import dynamic from "next/dynamic";
 import clsx from "clsx";
 import moment from "moment";
-import AlertModal from "../Modals/AlertModal";
-import AlertModalDynamic from "../Modals/AlertModalDynamic";
 import ActivityIndicator from "~/components/atoms/ActivityIndicator";
 
 import { trpc } from "~/app/_trpc/client";
 import { serverClient } from "~/app/_trpc/serverClient";
 import { deleteImage } from "~/lib/functions/deleteImage";
 
+const AlertModal = dynamic(() => import("../Modals/AlertModal"));
+const AlertModalDynamic = dynamic(() => import("../Modals/AlertModalDynamic"));
+
 interface FilesImagesListProps {
   initialData: Awaited<ReturnType<(typeof serverClient)["filesImages"]>> | any;
 }
diff --git a/src/components/molecules/Lists/MessagesList.tsx b/src/components/molecules/Lists/MessagesList.tsx
@@ -1,27 +1,26 @@
 "use client";
 
 import { useState, useEffect, Fragment } from "react";
-import { useRouter } from "next/navigation";
 import { useInView } from "react-intersection-observer";
 import clsx from "clsx";
 import moment from "moment";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import Image from "next/image";
-import AlertModal from "../Modals/AlertModal";
-import AlertModalDynamic from "../Modals/AlertModalDynamic";
 import ActivityIndicator from "~/components/atoms/ActivityIndicator";
 
 import { trpc } from "~/app/_trpc/client";
 import { serverClient } from "~/app/_trpc/serverClient";
 
+const AlertModal = dynamic(() => import("../Modals/AlertModal"));
+const AlertModalDynamic = dynamic(() => import("../Modals/AlertModalDynamic"));
+
 interface MessagesListProps {
   userData: Awaited<ReturnType<(typeof serverClient)["user"]>>;
   initialData: Awaited<ReturnType<(typeof serverClient)["messages"]>> | any;
 }
 
 export default function MessagesList({ userData, initialData }: MessagesListProps) {
-  const router = useRouter();
-
   const { ref, inView } = useInView();
 
   const [isPending, setIsPending] = useState<boolean>(false);
@@ -257,6 +256,11 @@ export default function MessagesList({ userData, initialData }: MessagesListProp
                                   <Link
                                     href="/files-images"
                                     className="rounded-lg border border-blue-600 bg-blue-200 px-2 py-1 text-[10px] font-bold text-blue-900"
+                                    onClick={() => {
+                                      readMessageMutation.mutate({
+                                        id: message.id,
+                                      });
+                                    }}
                                   >
                                     uploaded something
                                   </Link>
diff --git a/src/components/molecules/ProfileMainHolder.tsx b/src/components/molecules/ProfileMainHolder.tsx
@@ -1,14 +1,16 @@
 "use client";
 
 import clsx from "clsx";
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import ActivityIndicator from "../atoms/ActivityIndicator";
-import CopyClipboard from "../atoms/CopyClipboard";
-import ChatBox from "./ChatBox";
 
 import { trpc } from "~/app/_trpc/client";
 import { serverClient } from "~/app/_trpc/serverClient";
 
+const CopyClipboard = dynamic(() => import("../atoms/CopyClipboard"));
+const ChatBox = dynamic(() => import("./ChatBox"));
+
 interface ProfileMainHolderProps {
   profile: Awaited<ReturnType<(typeof serverClient)["profile"]>>;
 }
diff --git a/src/components/molecules/SocialMediaHolder.tsx b/src/components/molecules/SocialMediaHolder.tsx
@@ -44,7 +44,7 @@ export default function SocialMediaHolder({
             alt="facebook"
             width={100}
             height={100}
-            className="h-6 w-6"
+            className="h-6 w-6 transform transition duration-200 ease-in-out hover:scale-125"
           />
         </Link>
       )}
@@ -61,7 +61,7 @@ export default function SocialMediaHolder({
             alt="instagram"
             width={100}
             height={100}
-            className="h-6 w-6"
+            className="h-6 w-6 transform transition duration-200 ease-in-out hover:scale-125"
           />
         </Link>
       )}
@@ -72,7 +72,14 @@ export default function SocialMediaHolder({
           data-tooltip-id="magaaazine-tooltip"
           data-tooltip-content="Tiktok"
         >
-          <Image priority src={tiktok} alt="tiktok" width={100} height={100} className="h-6 w-6" />
+          <Image
+            priority
+            src={tiktok}
+            alt="tiktok"
+            width={100}
+            height={100}
+            className="h-6 w-6 transform transition duration-200 ease-in-out hover:scale-125"
+          />
         </Link>
       )}
       {twitterx_link && (
@@ -88,7 +95,7 @@ export default function SocialMediaHolder({
             alt="twitter"
             width={100}
             height={100}
-            className="h-6 w-6"
+            className="h-6 w-6 transform transition duration-200 ease-in-out hover:scale-125"
           />
         </Link>
       )}
@@ -105,7 +112,7 @@ export default function SocialMediaHolder({
             alt="linkedin"
             width={100}
             height={100}
-            className="h-6 w-6"
+            className="h-6 w-6 transform transition duration-200 ease-in-out hover:scale-125"
           />
         </Link>
       )}
@@ -116,7 +123,14 @@ export default function SocialMediaHolder({
           data-tooltip-id="magaaazine-tooltip"
           data-tooltip-content="Github"
         >
-          <Image priority src={github} alt="github" width={100} height={100} className="h-6 w-6" />
+          <Image
+            priority
+            src={github}
+            alt="github"
+            width={100}
+            height={100}
+            className="h-6 w-6 transform transition duration-200 ease-in-out hover:scale-125"
+          />
         </Link>
       )}
       {website_link && (
@@ -137,7 +151,7 @@ export default function SocialMediaHolder({
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
-            className="h-6 w-6 text-neutral-400"
+            className="h-6 w-6 transform text-neutral-400 transition duration-200 ease-in-out hover:scale-125"
           >
             <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
             <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
diff --git a/src/components/templates/DefaultLayout.tsx b/src/components/templates/DefaultLayout.tsx
@@ -1,6 +1,8 @@
 import { ReactNode } from "react";
+import dynamic from "next/dynamic";
 import Header from "../organisms/Header";
-import Footer from "../organisms/Footer";
+
+const Footer = dynamic(() => import("../organisms/Footer"));
 
 interface DefaultLayoutProps {
   children: ReactNode;
