From a6624b8a4c1c2595b4ebad19a94f85d675fc9d94 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Fri, 25 Sep 2026 21:16:16 +0100
Subject: [PATCH] Implement Preload Loader and Remove Unused CSS

- Added a new inline CSS style for a preload loader to enhance user experience during loading times.
- Introduced an SVG-based loader animation for visual feedback while the application is loading.
- Removed the obsolete preload.css file as its styles have been integrated into index.html.
---
 index.html         | 66 +++++++++++++++++++++++++++++++++++++++++++---
 public/preload.css | 26 ------------------
 2 files changed, 63 insertions(+), 29 deletions(-)
 delete mode 100644 public/preload.css
diff --git a/index.html b/index.html
index 355aac42..8f4e16dd 100644
--- a/index.html
+++ b/index.html
@@ -12,14 +12,74 @@
     <link rel="apple-touch-icon" href="./logo192.png" />
     <link rel="manifest" href="./manifest.json" />
     <link rel="stylesheet" href="./fonts/fonts.css" preload />
-    <link rel="stylesheet" href="./preload.css" preload />
+    <style>
+      .fc-preload {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      /* HTML: <div class="loader"></div> */
+      .fc-loader {
+        width: 35px;
+        aspect-ratio: 1;
+      }
+
+      .fc-loader svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      .fc-loader svg path {
+        stroke-width: 7px;
+        stroke: #008eff;
+      }
+    </style>
     <script type="module" src="/src/index.jsx"></script>
     <title>Farm Control</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root">
-      <div class="fc-preload"><div class="fc-loader"></div></div>
+    <div id="rooot">
+      <div class="fc-preload">
+        <div class="fc-loader">
+          <svg
+            width="100%"
+            height="100%"
+            viewBox="0 0 64 64"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+            xml:space="preserve"
+            class="th-icon"
+            style="
+              fill-rule: evenodd;
+              clip-rule: evenodd;
+              stroke-linecap: round;
+              stroke-linejoin: round;
+              stroke-miterlimit: 1.5;
+            "
+          >
+            <g>
+              <path
+                d="M32,5.131C46.829,5.131 58.869,17.171 58.869,32"
+                style="fill: none"
+              />
+              <animateTransform
+                attributeName="transform"
+                attributeType="XML"
+                type="rotate"
+                from="0 32 32"
+                to="360 32 32"
+                dur="1s"
+                repeatCount="indefinite"
+              />
+            </g>
+          </svg>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/public/preload.css b/public/preload.css
deleted file mode 100644
index b4fedfac..00000000
--- a/public/preload.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.fc-preload {
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* HTML: <div class="loader"></div> */
-.fc-loader {
-  width: 35px;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  background:
-    radial-gradient(farthest-side, #008eff 94%, #0000) top/6px 6px no-repeat,
-    conic-gradient(#0000 30%, #008eff);
-  mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
-  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
-  animation: l13 1s infinite linear;
-}
-
-@keyframes l13 {
-  100% {
-    transform: rotate(1turn);
-  }
-}
