having log out work and now atdesign nice

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

@@ -1,7 +1,9 @@
+import { $authTokens } from "../../controller/recoil";
 import Login from "../../pages/Login";
 import SkeletonLoader from "../loading/skeleton";
 import { useEffect } from "react";
 import { useGetUserDetails } from "../../controller/index";
+import { useRecoilValue } from "recoil";
 
 export default function ProtectedRoute({
   children,
@@ -10,6 +12,14 @@ export default function ProtectedRoute({
 }) {
   const { data, isLoading, isError, refetch } = useGetUserDetails();
 
+  const authTokens = useRecoilValue($authTokens);
+
+  useEffect(() => {
+    if (!authTokens) {
+      refetch();
+    }
+  }, [authTokens]);
+
   if (isLoading)
     return (
       <div className="container h-screen w-screen">

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

@@ -1,11 +1,5 @@
-import { Skeleton } from "@mui/material";
+import { Skeleton } from "antd";
 
 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>
-  );
+  return <Skeleton avatar paragraph={{ rows: 4 }} />;
 }