From ad03004f33223cf62993204a0b2da9cae6548cab Mon Sep 17 00:00:00 2001
From: Sergio <77530549+sergi0g@users.noreply.github.com>
Date: Fri, 28 Feb 2025 16:50:29 +0200
Subject: [PATCH] Improve loading page in web

---
 web/src/components/Loading.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Loading.tsx b/web/src/components/Loading.tsx
index 67fe256..957fb51 100644
--- a/web/src/components/Loading.tsx
+++ b/web/src/components/Loading.tsx
@@ -1,7 +1,7 @@
 import { Data } from "../types";
 import Logo from "./Logo";
 import { theme } from "../theme";
-import { RefreshCw } from "lucide-react";
+import { LoaderCircle } from "lucide-react";
 
 export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
   fetch(
@@ -26,9 +26,16 @@ export default function Loading({ onLoad }: { onLoad: (data: Data) => void }) {
             <Logo />
           </div>
           <div
-            className={`flex h-full items-center justify-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
+            className={`flex flex-col h-full items-center justify-center gap-1 text-${theme}-500 dark:text-${theme}-400`}
           >
-            Loading <RefreshCw className="animate-spin" />
+            <div className="flex gap-1 mb-8">
+              Loading <LoaderCircle className="animate-spin" />
+            </div>
+            <p>
+              If this takes more than a few seconds, there was probably a
+              problem fetching the data. Please try reloading the page and
+              report a bug if the problem persists.
+            </p>
           </div>
         </div>
       </div>