@timber-js/app 0.2.0-alpha.2 → 0.2.0-alpha.3

package/dist/client/top-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"top-loader.d.ts","sourceRoot":"","sources":["../../src/client/top-loader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AASH,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA6CD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,eAAe,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA6F7F"}
+{"version":3,"file":"top-loader.d.ts","sourceRoot":"","sources":["../../src/client/top-loader.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AASH,MAAM,WAAW,eAAe;IAC9B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,qDAAqD;IACrD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAmDD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,eAAe,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA0F7F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timber-js/app",
-  "version": "0.2.0-alpha.2",
+  "version": "0.2.0-alpha.3",
   "description": "Vite-native React framework for Cloudflare Workers — correct HTTP semantics, real status codes, pages that work without JavaScript",
   "keywords": [
     "cloudflare-workers",

package/src/client/top-loader.tsx

@@ -60,6 +60,7 @@ const DEFAULT_Z_INDEX = 1600;
 // Unique keyframes name to avoid collisions with user styles.
 const CRAWL_KEYFRAMES = '__timber_top_loader_crawl';
 const APPEAR_KEYFRAMES = '__timber_top_loader_appear';
+const FINISH_KEYFRAMES = '__timber_top_loader_finish';
 
 // Track whether the @keyframes rules have been injected into the document.
 let keyframesInjected = false;
@@ -83,6 +84,11 @@ function ensureKeyframes(): void {
   from { opacity: 0; }
   to { opacity: 1; }
 }
+@keyframes ${FINISH_KEYFRAMES} {
+  0% { width: 90%; opacity: 1; }
+  50% { width: 100%; opacity: 1; }
+  100% { width: 100%; opacity: 0; }
+}
 `;
   document.head.appendChild(style);
   keyframesInjected = true;
@@ -161,14 +167,13 @@ export function TopLoader({ config }: { config?: TopLoaderConfig }): React.React
           ].join(', '),
         }
       : {
-          // Finishing: snap to 100% width (200ms), THEN fade out (200ms).
-          // The opacity transition is delayed so the user sees the bar
-          // reach 100% before it disappears. Without the delay, both
-          // transitions run simultaneously and the bar fades before the
-          // fill animation is visible.
-          width: '100%',
-          opacity: 0,
-          transition: 'width 200ms ease, opacity 200ms ease 200ms',
+          // Finishing: fill to 100% then fade out via a keyframe animation.
+          // We use a keyframe instead of a CSS transition because the
+          // animation-to-transition handoff is unreliable — the browser
+          // may not capture the animated width as the transition's "from"
+          // value when both the animation removal and transition are
+          // applied in the same render frame.
+          animation: `${FINISH_KEYFRAMES} 400ms ease forwards`,
         }),
     ...(shadow
       ? {
@@ -177,12 +182,10 @@ export function TopLoader({ config }: { config?: TopLoaderConfig }): React.React
       : {}),
   };
 
-  // Clean up the finishing phase when the CSS transition completes.
-  // onTransitionEnd fires once per transitioned property — we act on
-  // the first one (opacity) and ignore subsequent (width).
-  const handleTransitionEnd = phase === 'finishing'
-    ? (e: React.TransitionEvent) => {
-        if (e.propertyName === 'opacity') {
+  // Clean up the finishing phase when the finish animation completes.
+  const handleAnimationEnd = phase === 'finishing'
+    ? (e: React.AnimationEvent) => {
+        if (e.animationName === FINISH_KEYFRAMES) {
           setPhase('hidden');
         }
       }
@@ -195,6 +198,6 @@ export function TopLoader({ config }: { config?: TopLoaderConfig }): React.React
       'aria-hidden': 'true',
       'data-timber-top-loader': '',
     },
-    createElement('div', { style: barStyle, onTransitionEnd: handleTransitionEnd })
+    createElement('div', { style: barStyle, onAnimationEnd: handleAnimationEnd })
   );
 }