From 03ddce83b768943854ab481f945fd694358bb179 Mon Sep 17 00:00:00 2001
From: Timo <hallo@timobusse.de>
Date: Wed, 7 May 2025 09:23:08 +0200
Subject: [PATCH] machine-list:loading skeleton

---
 pkgs/webview-ui/app/src/index.css             | 85 +++++++++++++++++++
 .../app/src/routes/machines/list.tsx          | 38 ++++++---
 2 files changed, 113 insertions(+), 10 deletions(-)

diff --git a/pkgs/webview-ui/app/src/index.css b/pkgs/webview-ui/app/src/index.css
index 56279bebd..67575025d 100644
--- a/pkgs/webview-ui/app/src/index.css
+++ b/pkgs/webview-ui/app/src/index.css
@@ -110,3 +110,88 @@ summary::marker {
 
 .accordeon__body {
 }
+
+.machine-item-loader {
+  @apply col-span-1 flex flex-col items-center;
+
+  display: flex;
+  justify-content: center;
+  position: relative;
+  padding: theme(padding.2);
+  border-radius: theme(borderRadius.md);
+
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.machine-item-loader__thumb-wrapper {
+  position: relative;
+  z-index: 20;
+  padding: theme(padding.4);
+
+  border-radius: theme(borderRadius.md);
+  overflow: hidden;
+}
+
+.machine-item-loader__thumb {
+  position: relative;
+  width: 100px;
+  height: 100px;
+  background: theme(backgroundColor.secondary.100);
+  border-radius: theme(borderRadius.md);
+  overflow: hidden;
+}
+
+.machine-item-loader__headline {
+  position: relative;
+  z-index: 20;
+  width: 90%;
+  height: 20px;
+
+  background: theme(backgroundColor.secondary.100);
+  border-radius: theme(borderRadius.sm);
+  overflow: hidden;
+}
+
+.machine-item-loader__cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.machine-item-loader__loader {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    transparent 20%,
+    theme(backgroundColor.secondary.200) 50%,
+    transparent 80%
+  );
+  background-size: 400px 100%;
+
+  animation: loader 4s linear infinite;
+  transition: all 0.56s ease;
+}
+
+.machine-item-loader__cover .machine-item-loader__loader {
+  background: linear-gradient(
+    to right,
+    transparent 20%,
+    theme(backgroundColor.secondary.50) 50%,
+    transparent 80%
+  );
+}
+
+@keyframes loader {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
diff --git a/pkgs/webview-ui/app/src/routes/machines/list.tsx b/pkgs/webview-ui/app/src/routes/machines/list.tsx
index 3d211003b..fb9127886 100644
--- a/pkgs/webview-ui/app/src/routes/machines/list.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/list.tsx
@@ -137,18 +137,36 @@ export const MachineListView: Component = () => {
         <Switch>
           <Match when={inventoryQuery.isLoading}>
             {/* Loading skeleton */}
-            <div>
-              <div class="  m-2 shadow-lg">
-                <figure class="pl-2">
-                  <div class=" size-12"></div>
-                </figure>
-                <div class="">
-                  <h2 class="">
-                    <div class=" h-12 w-80"></div>
-                  </h2>
-                  <div class=" h-8 w-72"></div>
+            <div class="grid grid-cols-4"></div>
+            <div class="machine-item-loader">
+              <div class="machine-item-loader__thumb-wrapper">
+                <div class="machine-item-loader__thumb">
+                  <div class="machine-item-loader__loader" />
                 </div>
               </div>
+              <div class="machine-item-loader__headline">
+                <div class="machine-item-loader__loader" />
+              </div>
+            </div>
+            <div class="machine-item-loader">
+              <div class="machine-item-loader__thumb-wrapper">
+                <div class="machine-item-loader__thumb">
+                  <div class="machine-item-loader__loader" />
+                </div>
+              </div>
+              <div class="machine-item-loader__headline">
+                <div class="machine-item-loader__loader" />
+              </div>
+            </div>
+            <div class="machine-item-loader">
+              <div class="machine-item-loader__thumb-wrapper">
+                <div class="machine-item-loader__thumb">
+                  <div class="machine-item-loader__loader" />
+                </div>
+              </div>
+              <div class="machine-item-loader__headline">
+                <div class="machine-item-loader__loader" />
+              </div>
             </div>
           </Match>
           <Match