ui/refetch: don't block button clicks, move context out of modal

pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionInstall.tsx

@@ -5,6 +5,7 @@ import { useMachineName } from "@/src/hooks/clan";
 import { useMachineStateQuery } from "@/src/hooks/queries";
 import styles from "./SidebarSectionInstall.module.css";
 import { Alert } from "../Alert/Alert";
+import { useClanContext } from "@/src/routes/Clan/Clan";
 
 export interface SidebarSectionInstallProps {
   clanURI: string;
@@ -12,8 +13,8 @@ export interface SidebarSectionInstallProps {
 }
 
 export const SidebarSectionInstall = (props: SidebarSectionInstallProps) => {
+  const ctx = useClanContext();
   const query = useMachineStateQuery(props.clanURI, props.machineName);
-
   const [showInstall, setShowModal] = createSignal(false);
 
   return (
@@ -32,7 +33,12 @@ export const SidebarSectionInstall = (props: SidebarSectionInstallProps) => {
           <InstallModal
             open={showInstall()}
             machineName={useMachineName()}
-            onClose={() => setShowModal(false)}
+            onClose={async () => {
+              // refresh some queries
+              ctx.machinesQuery.refetch();
+              ctx.serviceInstancesQuery.refetch();
+              setShowModal(false);
+            }}
           />
         </Show>
       </div>

pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionUpdate.tsx

@@ -4,6 +4,7 @@ import { useMachineName } from "@/src/hooks/clan";
 import { useMachineStateQuery } from "@/src/hooks/queries";
 import styles from "./SidebarSectionInstall.module.css";
 import { UpdateModal } from "@/src/workflows/InstallMachine/UpdateMachine";
+import { useClanContext } from "@/src/routes/Clan/Clan";
 
 export interface SidebarSectionUpdateProps {
   clanURI: string;
@@ -11,6 +12,7 @@ export interface SidebarSectionUpdateProps {
 }
 
 export const SidebarSectionUpdate = (props: SidebarSectionUpdateProps) => {
+  const ctx = useClanContext();
   const query = useMachineStateQuery(props.clanURI, props.machineName);
 
   const [showUpdate, setShowUpdate] = createSignal(false);
@@ -29,7 +31,13 @@ export const SidebarSectionUpdate = (props: SidebarSectionUpdateProps) => {
           <UpdateModal
             open={showUpdate()}
             machineName={useMachineName()}
-            onClose={() => setShowUpdate(false)}
+            onClose={async () => {
+              // refresh some queries
+              ctx.machinesQuery.refetch();
+              ctx.serviceInstancesQuery.refetch();
+
+              setShowUpdate(false);
+            }}
           />
         </Show>
       </div>

pkgs/clan-app/ui/src/workflows/InstallMachine/InstallMachine.tsx

@@ -13,7 +13,6 @@ import { installSteps } from "./steps/installSteps";
 import { ApiCall } from "@/src/hooks/api";
 
 import cx from "classnames";
-import { useClanContext } from "@/src/routes/Clan/Clan";
 
 interface InstallStepperProps {
   onDone: () => void;
@@ -67,8 +66,6 @@ export interface InstallStoreType {
 export type PromptValues = Record<string, Record<string, string>>;
 
 export const InstallModal = (props: InstallModalProps) => {
-  const ctx = useClanContext();
-
   const stepper = createStepper(
     {
       steps,
@@ -111,10 +108,6 @@ export const InstallModal = (props: InstallModalProps) => {
   };
 
   const onClose = async () => {
-    // refresh some queries
-    await ctx.machinesQuery.refetch();
-    await ctx.serviceInstancesQuery.refetch();
-
     props.onClose?.();
   };
 

pkgs/clan-app/ui/src/workflows/InstallMachine/UpdateMachine.tsx

@@ -19,7 +19,6 @@ import { LoadingBar } from "@/src/components/LoadingBar/LoadingBar";
 import { useApiClient } from "@/src/hooks/ApiClient";
 import { useClanURI } from "@/src/hooks/clan";
 import { AlertProps } from "@/src/components/Alert/Alert";
-import { useClanContext } from "@/src/routes/Clan/Clan";
 
 // TODO: Deduplicate
 interface UpdateStepperProps {
@@ -238,8 +237,6 @@ export type UpdateSteps = typeof steps;
 export type PromptValues = Record<string, Record<string, string>>;
 
 export const UpdateModal = (props: UpdateModalProps) => {
-  const ctx = useClanContext();
-
   const stepper = createStepper(
     {
       steps,
@@ -285,10 +282,6 @@ export const UpdateModal = (props: UpdateModalProps) => {
   };
 
   const onClose = async () => {
-    // refresh some queries
-    await ctx.machinesQuery.refetch();
-    await ctx.serviceInstancesQuery.refetch();
-
     props.onClose?.();
   };