ui/install: clean up design

pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx

@@ -60,6 +60,7 @@ const ConfigureAddress = () => {
   });
 
   const [isReachable, setIsReachable] = createSignal<string | null>(null);
+  const [loading, setLoading] = createSignal<boolean>(false);
 
   const client = useApiClient();
   // TODO: push values to the parent form Store
@@ -80,12 +81,15 @@ const ConfigureAddress = () => {
       return;
     }
 
+    setLoading(true);
     const call = client.fetch("check_machine_ssh_login", {
       remote: {
         address,
       },
     });
     const result = await call.result;
+    setLoading(false);
+
     console.log("SSH login check result:", result);
     if (result.status === "success") {
       setIsReachable(address);
@@ -118,28 +122,28 @@ const ConfigureAddress = () => {
                 )}
               </Field>
             </Fieldset>
-            <Button
-              disabled={!getValue(formStore, "targetHost")}
-              endIcon="ArrowRight"
-              onClick={tryReachable}
-              hierarchy="secondary"
-            >
-              Test Connection
-            </Button>
           </div>
         }
         footer={
           <div class="flex justify-between">
             <BackButton />
-            <NextButton
-              type="submit"
-              disabled={
+
+            <Show
+              when={
                 !isReachable() ||
                 isReachable() !== getValue(formStore, "targetHost")
               }
+              fallback={<NextButton type="submit">Next</NextButton>}
             >
-              Next
-            </NextButton>
+              <Button
+                endIcon="ArrowRight"
+                onClick={tryReachable}
+                hierarchy="secondary"
+                loading={loading()}
+              >
+                Test Connection
+              </Button>
+            </Show>
           </div>
         }
       />
@@ -655,10 +659,11 @@ const InstallProgress = () => {
         >
           Machine is beeing installed
         </Typography>
+        <LoadingBar />
         <Typography
           hierarchy="label"
           size="default"
-          class="py-2"
+          class=""
           color="secondary"
           inverted
         >
@@ -694,10 +699,9 @@ const InstallProgress = () => {
             </Match>
           </Switch>
         </Typography>
-        <LoadingBar />
         <Button
           hierarchy="primary"
-          class="w-fit"
+          class="w-fit mt-3"
           size="s"
           onClick={handleCancel}
         >