nice navigation and clean with authentication/login and such

packages/desktop/src/components/ProtectedRoute/index.tsx

@@ -1,5 +1,6 @@
 import Login from "../../pages/Login";
 import { STORE_ITEMS } from "../../electron/store";
+import SkeletonLoader from "../loading/skeleton";
 import { nirvanaApi } from "../../controller/nirvanaApi";
 import { useEffect } from "react";
 import { useGetUserDetails } from "../../controller/index";
@@ -16,8 +17,12 @@ export default function ProtectedRoute({
     // nirvanaApi.getUserDetails();
   }, []);
 
-  if (isLoading || true)
+  if (isLoading)
-    return <span>please wait while we authenticate you</span>;
+    return (
+      <div className="container h-screen w-screen">
+        <SkeletonLoader />
+      </div>
+    );
 
   if (isError) {
     return <Login onReady={() => refetch()} />;

packages/desktop/src/components/loading/skeleton.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@mui/material";
+
+export default function SkeletonLoader() {
+  return (
+    <div>
+      <Skeleton variant="text" width={210} />
+      <Skeleton variant="circular" width={40} height={40} />
+      <Skeleton variant="rectangular" width={210} height={118} />
+    </div>
+  );
+}

packages/desktop/src/pages/Home/index.tsx

@@ -8,8 +8,11 @@ import {
 import Logo, { LogoType } from "../../components/Logo";
 
 import { useEffect } from "react";
+import { useGetUserDetails } from "../../controller/index";
 
 export default function Home() {
+  const { data: user } = useGetUserDetails();
+
   return (
     <div className="h-screen w-screen bg-slate-700">
       {/* header */}
@@ -26,7 +29,7 @@ export default function Home() {
 
         <span className="relative mx-5">
           <img
-            src="https://lh3.googleusercontent.com/a-/AOh14Gjm29Sd1Wnm8NvZbXkosvf6SoID6kBP5OHRLVIOBQ=s96-c"
+            src={user.picture}
             className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
             alt="cannot find"
           />