@visns-studio/visns-components 6.5.3 → 6.5.5

package/package.json

@@ -91,7 +91,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.5.3",
+    "version": "6.5.5",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/auth/Login.jsx

@@ -146,12 +146,12 @@ const Login = ({
                             if (result.previous && result.previous !== '') {
                                 window.location.href = result.previous;
                             } else {
+                                // GenericAuth owns the transition from here:
+                                // its curtain drops over this screen and its
+                                // profile check performs the one navigation
+                                // to '/'. Navigating here as well produced a
+                                // double route change and a visible flicker.
                                 setSystemAuth(true);
-                                // Move now, with the profile the server just
-                                // returned — waiting for the background
-                                // re-check to navigate leaves the login form
-                                // on screen for a beat after success.
-                                navigate('/', { replace: true });
                             }
                         }
                     } else {

package/src/components/generic/GenericAuth.jsx

@@ -26,7 +26,7 @@ import ClientOTPVerify from '../auth/ClientOTPVerify';
 // blank white page between the sign-in redirect and the first authenticated
 // paint. Self-contained: SMIL animation, no stylesheet dependency, and the
 // consuming app's design tokens with neutral fallbacks.
-const AuthLoading = () => (
+const AuthLoading = ({ label }) => (
     <div
         role="status"
         aria-label="Loading"
@@ -34,9 +34,13 @@ const AuthLoading = () => (
             position: 'fixed',
             inset: 0,
             display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem',
             alignItems: 'center',
             justifyContent: 'center',
             background: 'var(--bg-color, #f4f4f5)',
+            // Above every app surface — this is a curtain, not a page.
+            zIndex: 2000,
         }}
     >
         <svg width="42" height="42" viewBox="0 0 42 42" fill="none">
@@ -63,13 +67,27 @@ const AuthLoading = () => (
                 />
             </path>
         </svg>
+        {label ? (
+            <p
+                style={{
+                    margin: 0,
+                    fontFamily: 'var(--font-family, inherit)',
+                    fontSize: 'var(--font-size-md, 0.9375rem)',
+                    color: 'var(--paragraph-color, #52525b)',
+                }}
+            >
+                {label}
+            </p>
+        ) : null}
     </div>
 );
 
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     const location = useLocation();
 
-    return loading ? <AuthLoading /> : !user || !user.id ? (
+    // The full-screen curtain in GenericAuth covers the loading state; this
+    // just refrains from redirecting until the check settles.
+    return loading ? null : !user || !user.id ? (
         <Navigate
             to={redirectPath}
             replace
@@ -121,14 +139,16 @@ const GenericAuth = ({
     const [isClientAuthenticated, setIsClientAuthenticated] = useState(false);
 
     const updateAuthStatus = async () => {
-        // Guards must not act while the FIRST profile check is in flight:
-        // evaluated against empty state they bounced dashboard → /login →
-        // dashboard after sign-in. But only block when there is no usable
-        // profile — raising loading over an already-authenticated tree swaps
-        // the whole page for a spinner on every background re-check, which
-        // is its own flicker. With a profile in hand the re-check is
-        // invisible.
-        if (!userProfile.id) {
+        // The loading curtain covers two moments and stays down for neither
+        // more nor less: the first profile check of a page load (no usable
+        // profile yet), and the sign-in transition (still on the login
+        // screen) — the user asked for "everything behind a please-wait
+        // screen, then the dashboard", not a settled page interrupted by a
+        // background re-check.
+        if (
+            !userProfile.id ||
+            window.location.pathname.split('/')[1] === 'login'
+        ) {
             setIsLoading(true);
         }
 
@@ -141,7 +161,12 @@ const GenericAuth = ({
             }
             setIsLoading(false);
 
-            if (location.pathname.split('/')[1] === 'login') {
+            // The live pathname, not the router hook's: this resolves after
+            // Login has already navigated, and the closure still holds
+            // '/login' from the render that created the effect — firing a
+            // second navigate('/') over the settled dashboard, whose route
+            // re-render is the sub-second flicker after sign-in.
+            if (window.location.pathname.split('/')[1] === 'login') {
                 navigate('/', { replace: true });
             }
         } catch (error) {
@@ -227,6 +252,10 @@ const GenericAuth = ({
 
     return (
         <>
+            {/* One curtain over everything while auth settles — the login
+                screen included, so sign-in reads: submit → please wait →
+                dashboard, with no intermediate paint. */}
+            {isLoading ? <AuthLoading label="Please wait…" /> : null}
             <Routes>
                 <Route
                     path="login"