@eintrek/erp-shell 0.1.16 → 0.1.18

package/dist/index.js

@@ -999,6 +999,16 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
     const params = navigation.useParams();
     const code = params?.code;
     const extendedSession = session;
+    // Track once-authenticated so a transient accessToken drop during the
+    // periodic session refresh (SessionRefreshTrigger every 4 min) doesn't
+    // blank the whole page. The initial-load gate below still handles cold
+    // start; once we've seen a real token we render children optimistically
+    // and let the API layer surface a real 401 if the token actually died.
+    const hasSeenAccessTokenRef = React.useRef(false);
+    React.useEffect(() => {
+        if (extendedSession?.accessToken)
+            hasSeenAccessTokenRef.current = true;
+    }, [extendedSession?.accessToken]);
     // Find the org from the URL `[code]` so we can detect a context mismatch
     // (the user bookmarked a different org than the cookie remembers).
     const orgFromCode = React__namespace.useMemo(() => {
@@ -1041,9 +1051,15 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
     if (status === "loading" && !session) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
     }
-    // Session loaded but no accessToken (e.g. token refresh failed) -> bounce
-    // through signin so we don't end up at a "No Keycloak Context" error.
-    if (status === "authenticated" && !extendedSession?.accessToken) {
+    // Session loaded but no accessToken AND we've never seen one → real auth
+    // failure (token refresh gave nothing back on cold start), bounce through
+    // signin. If we HAVE seen one before, the drop is almost certainly the
+    // in-flight periodic refresh (SessionRefreshTrigger). Don't redirect on
+    // that transient — the JWT callback will settle in a moment and API
+    // calls will keep working with the still-valid cookie.
+    if (status === "authenticated" &&
+        !extendedSession?.accessToken &&
+        !hasSeenAccessTokenRef.current) {
         if (typeof window !== "undefined") {
             const url = new URL(signInUrl, window.location.origin);
             url.searchParams.set("error", "NoAccessToken");
@@ -1052,7 +1068,9 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
         }
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
     }
-    if (!extendedSession?.accessToken) {
+    // Only blank the page when we've never seen a token — otherwise the
+    // periodic session refresh would visibly flash the loader every 4 min.
+    if (!extendedSession?.accessToken && !hasSeenAccessTokenRef.current) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent });
     }
     if (!code) {
@@ -1064,7 +1082,7 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
     const contentMargin = open && !isSidebarModalLayout ? "ml-[21.5rem]" : "";
     const needsLeftGutter = !(open && !isSidebarModalLayout);
     const wrap = permissionProvider ?? ((c) => c);
-    return (jsxRuntime.jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsxRuntime.jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (jsxRuntime.jsx("button", { type: "button", "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39", className: "fixed inset-0 z-40 bg-black/50", onClick: () => setOpen(false) })), jsxRuntime.jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxRuntime.jsxs("main", { className: "flex flex-1 flex-col min-h-screen gap-4", children: [jsxRuntime.jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsxRuntime.jsx(HeaderBackground, {}), jsxRuntime.jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsxRuntime.jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: breadcrumb })] }), jsxRuntime.jsx("div", { id: "header-title" })] })] }), jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "space-y-4 text-center", children: [jsxRuntime.jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsxRuntime.jsx("div", { className: cx("relative z-10 pr-6 pb-12", needsLeftGutter && "pl-6"), children: wrap(children) }, `org-${organizationId ?? "no-org"}`) })] }) })] }));
+    return (jsxRuntime.jsxs("div", { className: "flex min-h-screen w-full bg-background", children: [open && (jsxRuntime.jsx("div", { className: "fixed left-0 top-0 z-50 h-screen", children: sidebar })), open && isSidebarModalLayout && (jsxRuntime.jsx("button", { type: "button", "aria-label": "\u0E1B\u0E34\u0E14\u0E40\u0E21\u0E19\u0E39", className: "fixed inset-0 z-40 bg-black/50", onClick: () => setOpen(false) })), jsxRuntime.jsx("div", { className: cx("relative flex min-w-0 flex-1 flex-col transition-all", contentMargin), children: jsxRuntime.jsxs("main", { className: "flex flex-1 flex-col min-h-screen gap-4", children: [jsxRuntime.jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsxRuntime.jsx(HeaderBackground, {}), jsxRuntime.jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsxRuntime.jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: breadcrumb })] }), jsxRuntime.jsx("div", { id: "header-title" })] })] }), jsxRuntime.jsx(React.Suspense, { fallback: jsxRuntime.jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center", children: jsxRuntime.jsxs("div", { className: "space-y-4 text-center", children: [jsxRuntime.jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsxRuntime.jsx("div", { className: cx("relative z-10 pr-6", needsLeftGutter && "pl-6"), children: wrap(children) }, `org-${organizationId ?? "no-org"}`) })] }) })] }));
 }
 /** Local tiny classnames helper — avoids pulling clsx/tailwind-merge into
  *  the shell just for the layout file. Falsy values are skipped. */