stx-router 0.2.383 → 0.2.384

package/dist/client.js

@@ -182,8 +182,14 @@ function routerSource() {
     log('[router] build skew: page is',loadedBuild,'server is',incoming,'\u2014 full navigation');
     location.href=url;
   }
+  // A link marked data-stx-transition="none" swaps without the cross-fade. A
+  // tab bar is the case: iOS switches tabs instantly, and the fade read as a
+  // quarter-second lag on every tap in a phone app. Set by the click that
+  // started the navigation, so programmatic and history navigations keep it.
+  var instantNext=false;
+  var instantNav=false;
   function runViewTransition(callback){
-    if(!o.viewTransitions||!document.startViewTransition)return false;
+    if(instantNav||!o.viewTransitions||!document.startViewTransition)return false;
     try{
       var transition=document.startViewTransition(callback);
       var onAbort=function(err){log('[router] view transition aborted:',err&&err.message?err.message:err)};
@@ -210,19 +216,28 @@ function routerSource() {
     progEl.style.opacity=progVal>0?'1':'0';
     progEl.style.transform='scaleX('+(progVal/100)+')';
   }
+  // Shown only for a navigation that is actually waiting. A page served from
+  // the prefetch cache swaps in a few milliseconds, and drawing then fading a
+  // bar for it made every instant navigation look like a load.
+  var progDelay=null;
   function startProgress(){
     if(!o.progress||!progEl)return;
     if(progTimer){clearInterval(progTimer);progTimer=null}
-    setProgress(8);
-    progTimer=setInterval(function(){
-      if(progVal>=90)return;
-      // Asymptotic trickle \u2014 fast at first, slower near 90%
-      var inc=Math.max(0.4,(90-progVal)*0.08);
-      setProgress(progVal+inc);
-    },160);
+    if(progDelay)clearTimeout(progDelay);
+    progDelay=setTimeout(function(){
+      progDelay=null;
+      setProgress(8);
+      progTimer=setInterval(function(){
+        if(progVal>=90)return;
+        // Asymptotic trickle \u2014 fast at first, slower near 90%
+        var inc=Math.max(0.4,(90-progVal)*0.08);
+        setProgress(progVal+inc);
+      },160);
+    },150);
   }
   function finishProgress(){
     if(!o.progress||!progEl)return;
+    if(progDelay){clearTimeout(progDelay);progDelay=null;return}
     if(progTimer){clearInterval(progTimer);progTimer=null}
     setProgress(100);
     // Fade out, then reset. Delays chosen so the "full" state is briefly
@@ -824,6 +839,8 @@ function routerSource() {
     if(pushState!==false&&t.href===location.href&&!t.hash&&!force)return Promise.resolve(false);
 
     isNavigating=true;
+    instantNav=instantNext;
+    instantNext=false;
     document.body.classList.add(o.loadingClass);
     startProgress();
 
@@ -1359,6 +1376,7 @@ else {
             }catch(err){reject(err)}
           }
           if(runViewTransition(completeFragSwap)){}
+          else if(instantNav){completeFragSwap()}
           else{currentContent.style.transition='opacity 0.12s ease-out';currentContent.style.opacity='0';setTimeout(function(){completeFragSwap();currentContent.style.opacity='1';setTimeout(function(){currentContent.style.transition=''},150)},120)}
         });
       }
@@ -1809,6 +1827,10 @@ else {
         }
         if(runViewTransition(completeSwap)){
         }
+        else if(instantNav){
+          // A tab: swap at once, no fade either way.
+          completeSwap();
+        }
         else {
           // Fallback fade for browsers without View Transitions API
           currentContent.style.transition='opacity 0.12s ease-out';
@@ -1927,6 +1949,7 @@ else {
     e.preventDefault();
     e.stopPropagation();
     log('[router] navigating to:',href);
+    instantNext=link.getAttribute('data-stx-transition')==='none';
     navigate(withCurrentLocale(href));
   });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stx-router",
   "type": "module",
-  "version": "0.2.383",
+  "version": "0.2.384",
   "description": "File-based router for STX — .stx template discovery, nested layouts, typed route params, middleware, and client-side SPA navigation.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",