From a3c729db785f2af8a057840eb512ea6a11df32c7 Mon Sep 17 00:00:00 2001
From: Manas Kumar Pradhan <pkmanas22@gmail.com>
Date: Thu, 16 May 2024 19:56:43 +0530
Subject: [PATCH] fix/632 appbar fixes, hide join now and login button while
 loading

---
 package.json                  |  3 +-
 src/components/Appbar.tsx     | 68 ++++++++++++++++++-----------------
 src/components/CourseCard.tsx |  2 ++
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index 4abcf7930..9e1f1b0fd 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,6 @@
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "autoprefixer": "^10.0.1",
-
     "eslint": "^8.56.0",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.7",
@@ -109,6 +108,6 @@
     "prettier": "^3.2.4",
     "prisma": "^5.6.0",
     "tailwindcss": "^3.3.0",
-    "ts-node": "^10.9.2",
+    "ts-node": "^10.9.2"
   }
 }
diff --git a/src/components/Appbar.tsx b/src/components/Appbar.tsx
index 92d52d7a7..8bd84452d 100644
--- a/src/components/Appbar.tsx
+++ b/src/components/Appbar.tsx
@@ -17,10 +17,12 @@ import ProfileDropdown from './profile-menu/ProfileDropdown';
 import { ThemeToggler } from './ThemeToggler';
 
 export const Appbar = () => {
-  const session = useSession();
+  const { data: session, status: sessionStatus } = useSession();
   const [sidebarOpen, setSidebarOpen] = useRecoilState(sidebarOpenAtom);
   const currentPath = usePathname();
 
+  const isLoading = sessionStatus === 'loading';
+
   return (
     <>
       <nav className="fixed z-50 top-0 px-4 w-full h-16 border-b shadow-sm bg-background/80 backdrop-blur-md flex items-center gap-2 print:hidden">
@@ -35,38 +37,40 @@ export const Appbar = () => {
         <div className="md:max-w-screen-2xl mx-auto flex items-center justify-between w-full">
           <Logo onFooter={false} />
 
-          {session?.data?.user ? (
-            <>
-              <div className="hidden md:block">
-                <SearchBar />
-              </div>
-              <div className="flex items-center space-x-2">
-                {/* Search Bar for smaller devices */}
-                <MobileScreenSearch />
-                <ProfileDropdown />
-              </div>
-            </>
-          ) : (
-            <div className="flex items-center space-x-2">
-              <div className="hidden sm:flex items-center justify-around md:w-auto md:block space-x-3">
-                <AppbarAuth />
+          {session?.user
+            ? !isLoading && (
+                <>
+                  <div className="hidden md:block">
+                    <SearchBar />
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    {/* Search Bar for smaller devices */}
+                    <MobileScreenSearch />
+                    <ProfileDropdown />
+                  </div>
+                </>
+              )
+            : !isLoading && (
+                <div className="flex items-center space-x-2">
+                  <div className="hidden sm:flex items-center justify-around md:w-auto md:block space-x-3">
+                    <AppbarAuth />
 
-                <Button size={'sm'} asChild>
-                  <Link
-                    href={'https://harkirat.classx.co.in/new-courses'}
-                    target="_blank"
-                  >
-                    <p className="text-white">Join now</p>{' '}
-                    <Sparkles className="text-white ml-2 h-4 w-4 hover:translate-x-0.5 ease-linear duration-200" />
-                  </Link>
-                </Button>
-              </div>
-              <ThemeToggler />
-              <div className="block sm:hidden">
-                <NavigationMenu />
-              </div>
-            </div>
-          )}
+                    <Button size={'sm'} asChild>
+                      <Link
+                        href={'https://harkirat.classx.co.in/new-courses'}
+                        target="_blank"
+                      >
+                        <p className="text-white">Join now</p>{' '}
+                        <Sparkles className="text-white ml-2 h-4 w-4 hover:translate-x-0.5 ease-linear duration-200" />
+                      </Link>
+                    </Button>
+                  </div>
+                  <ThemeToggler />
+                  <div className="block sm:hidden">
+                    <NavigationMenu />
+                  </div>
+                </div>
+              )}
         </div>
       </nav>
       <div className="h-16 w-full print:hidden" />
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index a31bbfbb8..29f9e4b02 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -4,6 +4,8 @@ import PercentageComplete from './PercentageComplete';
 import { PrimaryButton } from './buttons/PrimaryButton';
 import { SecondaryButton } from './buttons/SecondaryButton';
 import { useRouter } from 'next/navigation';
+import { Button } from './ui/button';
+import { ChevronRight } from 'lucide-react';
 
 export const CourseCard = ({
   course,