perf(ui): optimize header render

Author: holedev

app/[locale]/(private)/profile/dynamic.tsx

@@ -1,6 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { User } from "@supabase/supabase-js";
 import { getTranslations } from "next-intl/server";
 
@@ -25,11 +24,6 @@ const Profile = async ({ user }: { user: User }) => {
           </div>
         </div>
       </CardContent>
-      <CardFooter className='flex justify-center'>
-        <Label className='uppercase font-bold text-center'>
-          {t("loginWith")} {user?.app_metadata.provider}
-        </Label>
-      </CardFooter>
     </Card>
   );
 };

app/api/auth/callback/route.ts

@@ -12,6 +12,7 @@ export async function GET(request: Request) {
     if (!error) {
       const forwardedHost = request.headers.get("x-forwarded-host");
       const isLocalEnv = process.env.NODE_ENV === "development";
+
       if (isLocalEnv) {
         return NextResponse.redirect(`${origin}${next}`);
       } else if (forwardedHost) {
@@ -21,6 +22,7 @@ export async function GET(request: Request) {
       }
     }
   }
+
   // TODO: Redirect to error page
   return NextResponse.redirect(`${origin}/auth/auth-code-error`);
 }

components/custom/Footer.tsx renamed to components/custom/Footer/index.tsx

@@ -1,26 +1,26 @@
 "use client";
 
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
-import { useTranslations, useLocale } from "next-intl";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select";
+import { useLocale, useTranslations } from "next-intl";
 import { usePathname, useRouter } from "@/configs/i18n/routing";
 import { useTransition } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const LocaleSelect = () => {
   const t = useTranslations("common.locale");
-
   const [isPending, startTransition] = useTransition();
   const locale = useLocale();
   const router = useRouter();
   const pathname = usePathname();
 
-  const handleChangeLocale = async (newLocale: string) => {
+  const handleChangeLocale = (newLocale: string) => {
     startTransition(() => {
       router.replace({ pathname }, { locale: newLocale });
     });
   };
 
   if (isPending) {
-    return null;
+    return <Skeleton className='h-10 w-[180px] border-2' />;
   }
 
   return (

components/custom/Header.tsx

@@ -6,7 +6,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger
 } from "@/components/ui/dropdown-menu";
-import { Button } from "../ui/button";
+import { Button } from "../../ui/button";
 import { useEffect, useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { createClient } from "@/configs/supabase/client";
@@ -15,6 +15,7 @@ import { _ROUTE_AUTH, _ROUTE_PROFILE } from "@/constants/route";
 import { useRouter } from "@/configs/i18n/routing";
 import { User } from "@supabase/supabase-js";
 import { useTranslations } from "next-intl";
+import { Skeleton } from "../../ui/skeleton";
 
 const UserProfile = () => {
   const t = useTranslations("common.nav");
@@ -44,7 +45,7 @@ const UserProfile = () => {
   }, []);
 
   if (loading) {
-    return null;
+    return <Skeleton className='h-10 w-10 rounded-full' />;
   }
 
   return user ? (

components/custom/LocaleSelect.tsx renamed to components/custom/Header/LocalSlelect.client.tsx

@@ -0,0 +1,28 @@
+import { useTranslations } from "next-intl";
+import { Link } from "@/configs/i18n/routing";
+import { ModeToggle } from "./ModeToggle.client";
+import { UserProfile } from "./UserProfile.client";
+import { LocaleSelect } from "./LocalSlelect.client";
+
+const Header = () => {
+  const tHeader = useTranslations("header");
+
+  return (
+    <header className='shadow-md border-b-2'>
+      <div className='container mx-auto px-4 py-4 flex justify-between items-center'>
+        <div className='flex items-center uppercase font-bold text-xl'>
+          <Link prefetch={true} href='/'>
+            {tHeader("logoName")}
+          </Link>
+        </div>
+        <div className='flex gap-2'>
+          <LocaleSelect />
+          <ModeToggle />
+          <UserProfile />
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export { Header };