Merge pull request 'ui/install: vars fix loading screen' (#5077) from ui/update-machine into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/5077

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

@@ -122,7 +122,7 @@ export const InstallModal = (props: InstallModalProps) => {
         // @ts-expect-error some steps might not have
         disablePadding={stepper.currentStep()?.isSplash}
       >
-        <InstallStepper onDone={() => props.onClose} />
+        <InstallStepper onDone={() => props.onClose?.()} />
       </Modal>
     </StepperProvider>
   );

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

@@ -34,6 +34,7 @@ import {
 import { useClanURI } from "@/src/hooks/clan";
 import { useApiClient } from "@/src/hooks/ApiClient";
 import { ProcessMessage, useNotifyOrigin } from "@/src/hooks/notify";
+import { Loader } from "@/src/components/Loader/Loader";
 
 export const InstallHeader = (props: { machineName: string }) => {
   return (
@@ -431,7 +432,22 @@ export const ConfigureData = () => {
   return (
     <>
       <Show when={generatorsQuery.isLoading}>
-        Checking credentials & data...
+        <div class="relative flex w-full flex-col items-center justify-end ">
+          <div class="z-10 mb-6 flex w-full max-w-md flex-col items-center gap-2 pt-4">
+            <Loader />
+            <Typography
+              hierarchy="title"
+              size="default"
+              weight="bold"
+              color="inherit"
+            >
+              Credentials & Data
+            </Typography>
+            <Typography hierarchy="label" size="default" color="secondary">
+              Loading Machine Generators ...
+            </Typography>
+          </div>
+        </div>
       </Show>
       <Show when={generatorsQuery.data}>
         {(generators) => <PromptsFields generators={generators()} />}