Handle project list loading issue

src/hooks/useProjects.js

@@ -2,17 +2,17 @@ import { useEffect, useState } from "react";
 import { cacheData, getCachedData } from "../slices/apiDataManager";
 import ProjectRepository from "../repositories/ProjectRepository";
 import { useProfile } from "./useProfile";
-import {useDispatch} from "react-redux";
+import { useDispatch } from "react-redux";
 import { setProjectId } from "../slices/localVariablesSlice";
 
-export const useProjects = () =>
-{
-  const {profile} = useProfile()
+export const useProjects = () => {
+  const { profile } = useProfile();
   const dispatch = useDispatch();
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
+  const projects_cache = getCachedData("projectslist");
   const fetchData = async () => {
     const projectIds = profile?.projects || [];
 
@@ -22,7 +22,6 @@ export const useProjects = () =>
         .sort((a, b) => a.name.localeCompare(b.name));
     };
 
-
     if (!projects_cache) {
       setLoading(true);
       try {
@@ -40,20 +39,15 @@ export const useProjects = () =>
       if (!projects.length) {
         const filtered = filterProjects(projects_cache);
         setProjects(filtered);
-
       }
     }
   };
 
-  useEffect( () =>
-    {
-    if ( profile )
-    {
+  useEffect(() => {
+    if (profile) {
       fetchData();
     }
-  }, []);
-
-
+  }, [profile]);
 
   return { projects, loading, error, refetch: fetchData };
 };