From 08a1acccd6c6e6a11211b065a40629c08312686a Mon Sep 17 00:00:00 2001
From: Marin Ivanov <dev@metala.org>
Date: Mon, 19 Aug 2024 23:30:03 +0300
Subject: improve loader

---
 index.html | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index 513d5ec..8997249 100644
--- a/index.html
+++ b/index.html
@@ -18,8 +18,8 @@
         <a href="#/tools">Инструменти</a>
         <a href="#/waiting">Пуйчи</a>
       </nav>
-      <section id="app">
-        <div class="grid center middle">
+      <section>
+        <div id="loader">
           <div>
               <div class="loadspin"></div>
               <p>
@@ -29,13 +29,18 @@
               </p>
             </div>
         </div>
+        <div id="app"></div>
       </section>
     </main>
   </div>
   <script src="ka.js"></script>
   <script>
-      const waiting = app.children[0];
       let isLoading = 0;
+      const loading = (val) => {
+        isLoading = val;
+        loader.$cls(isLoading ? "" : "hidden");
+      }
+      loader.$click(() => loading(0));
       const routes = {
         "/": () => div(
           h2("Lorem Ipsum"),
@@ -49,8 +54,7 @@
           p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "),
         ),
         "/network": () => div(
-          isLoading ? waiting
-          : table(
+          table(
             tr(
               td("IP"),
               td(input("text").$value("127.0.0.1")),
@@ -58,21 +62,24 @@
           ).$cls("network"),
         ),
         "/config": () => {
-          isLoading = 1;
+          return div();
+        },
+        "/waiting": () => {
+          loading(1);
           setTimeout(() => {
-            isLoading = 0;
+            loading(0);
             app.reload();
-          }, 10000);
-          return div();
+          }, 3000);
+          return div("Пуйчи");
         },
-        "/waiting": () => waiting,
         "": () => div(
           h1("Несъществуваща страница"),
           p("Страницата не е намерена.")
         ),
       };
       const onchange = () => {
-          doc.querySelectorAll('nav a').forEach(x => x.setAttribute('class',(location.href===x.href)?"active":""));
+        doc.querySelectorAll('nav a').forEach(x => x.$cls((location.href===x.href)?"active":""));
+        loading(isLoading);
       };
       router(app, routes, onchange);
   </script>
-- 
cgit v1.2.3