Implemented useAsync in the app structure for cleaner code

src/app/deployments/page.tsx

@@ -11,6 +11,7 @@ import { getDeployments } from "@/lib/dockship/deploy";
 import { getApplications } from "@/lib/dockship/application";
 import { cn } from "@/lib/utils";
 import DeployAppDialog from "@/components/dialogs/DeployApp";
+import { useAsync } from "@/hooks/use-async";
 
 const statusDot = {
   running: "bg-chart-2",
@@ -19,36 +20,13 @@ const statusDot = {
 } as const;
 
 export default function DeploymentsPage() {
-  const [applications, setApplications] = useState<Application[]>([]);
-  const [deployments, setDeployments] = useState<Deployment[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { value: applications } = useAsync([], getApplications);
 
-  useEffect(() => {
-    let mounted = true;
-
-    async function fetchData() {
-      try {
-        const [apps, deps] = await Promise.all([
-          getApplications(),
-          getDeployments(),
-        ]);
-
-        if (!mounted) return;
-
-        setApplications(apps);
-        setDeployments(deps.filter((d) => d !== null));
-      } catch (err) {
-        console.error("Failed to load deployments:", err);
-      } finally {
-        if (mounted) setLoading(false);
-      }
-    }
-
-    fetchData();
-    return () => {
-      mounted = false;
-    };
-  }, []);
+  const { value: deployments, loading } = useAsync(
+    [],
+    async () => (await getDeployments()).filter((d) => d !== null),
+    [applications]
+  );
 
   const appNameByContainer = useMemo(() => {
     const map = new Map<string, string>();