snice 4.29.0 → 4.30.1

package/dist/cdn/runtime/snice-runtime.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.29.0
+ * snice v4.30.1
  * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
  * (c) 2024
  * Released under the MIT License.
@@ -8,7 +8,7 @@ var Snice = (function (exports) {
     'use strict';
 
     /*!
-     * snice v4.28.0
+     * snice v4.30.0
      * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
      * (c) 2024
      * Released under the MIT License.
@@ -4634,20 +4634,45 @@ var Snice = (function (exports) {
             currentLayoutName = null;
             currentLayoutTimestamp = null;
         }
-        function checkGuards(guards, params, target) {
+        function createLoadingSpinner() {
+            const container = doc.createElement('div');
+            container.setAttribute('data-snice-loading', '');
+            container.innerHTML = /*html*/ `
+      <style>@keyframes snice-spin{to{transform:rotate(360deg)}}</style>
+      <div style="display:flex;align-items:center;justify-content:center;height:100%;min-height:200px">
+        <div style="width:32px;height:32px;border:3px solid rgba(128,128,128,0.3);border-top-color:rgba(128,128,128,0.8);border-radius:50%;animation:snice-spin 0.6s linear infinite"></div>
+      </div>`;
+            return container;
+        }
+        async function checkGuards(guards, params, target) {
             const hasGuards = !!guards;
             if (!hasGuards) {
                 return true;
             }
             const guardsArray = Array.isArray(guards) ? guards : [guards];
-            for (const guard of guardsArray) {
-                const allowed = guard(context, params);
-                if (!allowed) {
-                    renderForbiddenPage(target);
-                    return false;
+            let spinner = null;
+            let spinnerTimer = null;
+            // Show spinner after a short delay (avoids flash for fast sync guards)
+            spinnerTimer = setTimeout(() => {
+                spinner = createLoadingSpinner();
+                target.appendChild(spinner);
+            }, 50);
+            try {
+                for (const guard of guardsArray) {
+                    const allowed = await guard(context, params);
+                    if (!allowed) {
+                        renderForbiddenPage(target);
+                        return false;
+                    }
                 }
+                return true;
+            }
+            finally {
+                if (spinnerTimer)
+                    clearTimeout(spinnerTimer);
+                if (spinner)
+                    spinner.remove();
             }
-            return true;
         }
         function createHomeElement() {
             const newPageElement = doc.createElement(home);
@@ -4671,14 +4696,14 @@ var Snice = (function (exports) {
             div.innerHTML = /*html*/ `<h1>404</h1><p>Page not found</p>`;
             return { element: div, transition: undefined, layout: undefined };
         }
-        function resolveRoute(path, target) {
+        async function resolveRoute(path, target) {
             for (const route of routes) {
                 const params = route.route.match(path);
                 const isMatch = params !== false;
                 if (!isMatch) {
                     continue;
                 }
-                const guardsAllowed = checkGuards(route.guards, params, target);
+                const guardsAllowed = await checkGuards(route.guards, params, target);
                 if (!guardsAllowed) {
                     return { result: RouteResult.GUARDS_FAILED };
                 }
@@ -4791,7 +4816,7 @@ var Snice = (function (exports) {
             const isHomePath = (path?.trim() === '' || path === '/') && !!home;
             if (isHomePath) {
                 const homeRoute = routes.find(r => r.route.match('/'));
-                if (!checkGuards(homeRoute?.guards, {}, target))
+                if (!(await checkGuards(homeRoute?.guards, {}, target)))
                     return;
                 const { element, transition, layout } = createHomeElement();
                 await renderPage(target, element, transition, layout, path, {});
@@ -4801,7 +4826,7 @@ var Snice = (function (exports) {
             if (!path)
                 return;
             // Resolve route
-            const routeResult = resolveRoute(path, target);
+            const routeResult = await resolveRoute(path, target);
             // Guards failed (403 already rendered by checkGuards)
             if (routeResult.result === RouteResult.GUARDS_FAILED)
                 return;
@@ -5512,7 +5537,7 @@ var Snice = (function (exports) {
     }
 
     /*!
-     * snice v4.28.0
+     * snice v4.30.0
      * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
      * (c) 2024
      * Released under the MIT License.
@@ -5529,7 +5554,7 @@ var Snice = (function (exports) {
     }
 
     /*!
-     * snice v4.28.0
+     * snice v4.30.0
      * A decorator-driven web component library with differential rendering, routing, controllers, and 130+ ready-made UI components. Use as much or as little as you want. Zero dependencies, works anywhere.
      * (c) 2024
      * Released under the MIT License.