@eintrek/erp-shell 0.1.11 → 0.1.12

package/dist/index.js

@@ -1208,12 +1208,27 @@ function PermissionProvider({ children, usePermission, fallbackRulesMap, }) {
         return { ...fallbackRulesMap, ...rulesMap };
     }, [rulesMap, fallbackRulesMap]);
     const requiredRoles = React.useMemo(() => getRequiredChildGroups(pathname, mergedMap), [pathname, mergedMap]);
+    // Hook must run unconditionally (rules of hooks); we just ignore the
+    // result on the fast path below.
     const { hasPermission, isLoading, userRoles } = usePermission({
         requiredRoles,
     });
+    // Fast path — no rule covers this pathname, anyone can see it. Skip the
+    // probe UI entirely; flashing "checking permission" or "no access" on an
+    // unrestricted page is pure noise.
+    if (requiredRoles.length === 0) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+    }
+    // While the answer hasn't settled, render nothing and let the surrounding
+    // Next.js loading.tsx / Suspense fallback show. The old behaviour wrapped
+    // a big "กำลังตรวจสอบสิทธิ์..." card over the top, which both duplicated
+    // the app's own loader and — worse — caused a "ไม่มีสิทธิ์" flash on
+    // fast loads because the probe transiently returned `hasPermission:false,
+    // isLoading:false` before its dependencies (org context, role-segments)
+    // arrived.
     const isLoadingCombined = rulesLoading || isLoading;
     if (isLoadingCombined) {
-        return (jsxRuntime.jsx(erpTheme.Card, { className: "p-6", children: jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3", children: [jsxRuntime.jsx(lucideReact.Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" }), jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E15\u0E23\u0E27\u0E08\u0E2A\u0E2D\u0E1A\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E01\u0E32\u0E23\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07..." })] }) }));
+        return null;
     }
     if (!hasPermission) {
         return (jsxRuntime.jsx(erpTheme.Card, { className: "p-6", children: jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-3 text-center", children: [jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-8 w-8 text-destructive" }), jsxRuntime.jsxs("div", { className: "space-y-1", children: [jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-destructive", children: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07" }), jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E43\u0E19\u0E01\u0E32\u0E23\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49" }), requiredRoles.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-3 space-y-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E17\u0E35\u0E48\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23:" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: requiredRoles.map((role, idx) => (jsxRuntime.jsx("span", { className: "rounded bg-muted px-2 py-0.5 text-xs font-mono", children: role }, idx))) })] })), userRoles.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-3 space-y-1", children: [jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13:" }), jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 justify-center", children: userRoles.map((role, idx) => (jsxRuntime.jsx("span", { className: "rounded bg-primary/10 px-2 py-0.5 text-xs font-mono text-primary", children: role }, idx))) })] }))] })] }) }));