Fixed map elements not rendering on first open when on poor network conditions

src/routes/Home/Home.tsx

@@ -91,25 +91,30 @@ export default function Home() {
           newLocation.coords.longitude !== location.coords.longitude
         ) {
           setLocation(newLocation);
-          DistanceHandler(newLocation);
+          await DistanceHandler(newLocation);
         }
       }
     }
   }
 
-  // Refresh every 10 seconds
+  // Refresh when screen loads & every 10 seconds
+  requestLocation();
   useEffect(() => {
     const interval = setInterval(() => {
       requestLocation();
     }, 10000);
-
+    setTimeout(() => {
-    return () => clearInterval(interval);
+      queryClient.invalidateQueries({ queryKey: ["user"] });
-  });
+      queryClient.invalidateQueries({ queryKey: ["user_status"] });
-
+      queryClient.invalidateQueries({
-  // Refresh when screen loads
+        queryKey: ["user_status_list"],
-  requestLocation();
+      });
-  useEffect(() => {
+      queryClient.invalidateQueries({
+        queryKey: ["study_group_list"],
+      });
+    }, 2000);
     requestLocation();
+    return () => clearInterval(interval);
   }, []);
 
   async function DistanceHandler(location: RawLocationType) {