From 0b44770f1ffaf2a5164bfaa1ed3d61eb8632f848 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 12 Aug 2025 20:45:55 +0200
Subject: [PATCH] UI/install: add loading animation

---
 .../src/workflows/Install/steps/installSteps.tsx   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
index 5e66db2e4..e87de93b0 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
@@ -29,6 +29,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 (
@@ -157,6 +158,7 @@ const CheckHardware = () => {
                 Hardware Report
               </Typography>
               <Button
+                disabled={hardwareQuery.isLoading}
                 hierarchy="secondary"
                 startIcon="Report"
                 onClick={handleUpdateSummary}
@@ -165,7 +167,17 @@ const CheckHardware = () => {
               </Button>
             </Orienter>
             <Divider orientation="horizontal" />
-            <Show when={hardwareQuery.isLoading}>Loading...</Show>
+            <Show when={hardwareQuery.isLoading}>
+              <Typography
+                hierarchy="label"
+                size="s"
+                color="secondary"
+                class="flex gap-4 w-full justify-end items-center"
+              >
+                <Loader />
+                Loading
+              </Typography>
+            </Show>
             <Show when={hardwareQuery.data}>
               {(d) => (
                 <Alert