Vylepšené loadery

client/src/App.css

@@ -38,6 +38,19 @@
   }
 }
 
+.loader {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader>.loader-icon {
+  font-size: 64px;
+}
+
 .wrapper {
   padding: 20px;
 }

client/src/App.tsx

@@ -16,6 +16,8 @@ import { faCircleCheck, faTrashCan } from '@fortawesome/free-regular-svg-icons';
 import { useBank } from './context/bank';
 import { ClientData, Restaurants, Food, Order, Locations, PizzaOrder, PizzaDayState, FoodChoices, Menu } from './types';
 import Footer from './components/Footer';
+import { faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons';
+import Loader from './components/Loader';
 
 const EVENT_CONNECT = "connect"
 
@@ -49,6 +51,7 @@ function App() {
   const choiceRef = useRef<HTMLSelectElement>(null);
   const foodChoiceRef = useRef<HTMLSelectElement>(null);
   const poznamkaRef = useRef<HTMLInputElement>(null);
+  const [failure, setFailure] = useState<boolean>(false);
 
   // Načtení dat po přihlášení
   useEffect(() => {
@@ -57,9 +60,13 @@ function App() {
     }
     getData().then(data => {
       setData(data);
+    }).catch(e => {
+      setFailure(true);
     })
     getFood().then(food => {
       setFood(food);
+    }).catch(e => {
+      setFailure(true);
     })
   }, [auth, auth?.login]);
 
@@ -278,8 +285,28 @@ function App() {
     return <Login />;
   }
 
-  if (!data || !isConnected || !food) {
-    return <div>Načítám data...</div>
+  if (!isConnected) {
+    return <Loader
+      icon={faSatelliteDish}
+      description={'Zdá se, že máme problémy se spojením se serverem. Pokud problém přetrvává, kontaktujte správce systému.'}
+      animation={'fa-beat-fade'}
+    />
+  }
+
+  if (failure) {
+    return <Loader
+      title="Něco se nám nepovedlo :("
+      icon={faChainBroken}
+      description={'Ale to nevadí. To se stává, takový je život. Kontaktujte správce systému, který zajistí nápravu.'}
+    />
+  }
+
+  if (!data || !food) {
+    return <Loader
+      icon={faSearch}
+      description={'Hledáme, co dobrého je aktuálně v nabídce'}
+      animation={'fa-bounce'}
+    />
   }
 
   const noOrders = data?.pizzaDay?.orders?.length === 0;
@@ -292,14 +319,7 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>Oprava čtení env při výběru úložiště dat</li>
-              <li>Přepojení na <a href="https://redis.io">Redis</a> (jen v produkčním nasazení)</li>
-              <li>Oprava časové zóny v "Poslední aktualizace"</li>
-              <li>Oprava přesměrování při přihlášení přes Authelia</li>
-              <li>Zobrazení jména uživatele místo loginu při přihlášení přes Authelia</li>
-              <li>Funkční odhlášení přes Authelia</li>
-              <li>Oprava stahování pizz z Pizza Chefie</li>
-              <li>Pokročilá AI detekce zavřených podniků</li>
+              <li>Lépe vypadající a více vypovídající načítací obrazovky (ztráta spojení, chyba načtení apod.)</li>
             </ul>
           </Alert>
           <h1 className='title'>Dnes je {data.date}</h1>

client/src/components/Loader.tsx

@@ -0,0 +1,19 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+type Props = {
+  title?: String,
+  icon: IconDefinition,
+  description: String,
+  animation?: String,
+}
+
+function Loader(props: Props) {
+  return <div className='loader'>
+    <h1>{props.title || 'Prosím čekejte...'}</h1>
+    <FontAwesomeIcon icon={props.icon} className={`loader-icon mb-3 ` + (props.animation ?? '')} />
+    <p>{props.description}</p>
+  </div>
+}
+
+export default Loader;