@vaultix.ai/react 0.3.6 → 0.3.7

package/dist/index.d.mts

@@ -87,6 +87,13 @@ interface VaultixContextValue {
      * Controls which login methods and OAuth providers are rendered by <SignIn /> and <SignUp />.
      */
     appConfig: AppConfig | null;
+    /**
+     * True once the /api/v1/app/config fetch has settled (success OR failure).
+     * <SignIn /> and <SignUp /> render a skeleton until this is true so the
+     * default full set of methods/providers never flashes before narrowing
+     * to the app's configured set.
+     */
+    appConfigLoaded: boolean;
     signOut: (redirectUrl?: string) => Promise<void>;
     /** Update the current user's profile. Resolves with the updated user. */
     updateUser: (params: UpdateUserParams) => Promise<VaultixUser>;

package/dist/index.d.ts

@@ -87,6 +87,13 @@ interface VaultixContextValue {
      * Controls which login methods and OAuth providers are rendered by <SignIn /> and <SignUp />.
      */
     appConfig: AppConfig | null;
+    /**
+     * True once the /api/v1/app/config fetch has settled (success OR failure).
+     * <SignIn /> and <SignUp /> render a skeleton until this is true so the
+     * default full set of methods/providers never flashes before narrowing
+     * to the app's configured set.
+     */
+    appConfigLoaded: boolean;
     signOut: (redirectUrl?: string) => Promise<void>;
     /** Update the current user's profile. Resolves with the updated user. */
     updateUser: (params: UpdateUserParams) => Promise<VaultixUser>;

package/dist/index.js

@@ -113,6 +113,7 @@ function VaultixProvider({
   const [session, setSession] = (0, import_react.useState)(null);
   const [organization, setOrganization] = (0, import_react.useState)(null);
   const [appConfig, setAppConfig] = (0, import_react.useState)(null);
+  const [appConfigLoaded, setAppConfigLoaded] = (0, import_react.useState)(false);
   const jwtRef = (0, import_react.useRef)(null);
   const refreshTimerRef = (0, import_react.useRef)(null);
   const clearAuth = (0, import_react.useCallback)(() => {
@@ -224,6 +225,8 @@ function VaultixProvider({
           setAppConfig(cfg);
         }
       } catch {
+      } finally {
+        if (!cancelled) setAppConfigLoaded(true);
       }
     }
     hydrate();
@@ -287,6 +290,7 @@ function VaultixProvider({
     isSignedIn: !!session,
     apiOrigin,
     appConfig,
+    appConfigLoaded,
     signOut,
     updateUser,
     connectPlatform
@@ -438,8 +442,11 @@ function SignIn({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -711,6 +718,39 @@ function SignIn({
     "forgot-verify": `Code sent to ${email}`,
     "forgot-reset": "Choose a new password"
   };
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl",
+          "backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LockIcon, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
@@ -1115,8 +1155,11 @@ function SignUp({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -1209,6 +1252,37 @@ function SignUp({
     } catch {
     }
   }
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx2.clsx)(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {

package/dist/index.mjs

@@ -78,6 +78,7 @@ function VaultixProvider({
   const [session, setSession] = useState(null);
   const [organization, setOrganization] = useState(null);
   const [appConfig, setAppConfig] = useState(null);
+  const [appConfigLoaded, setAppConfigLoaded] = useState(false);
   const jwtRef = useRef(null);
   const refreshTimerRef = useRef(null);
   const clearAuth = useCallback(() => {
@@ -189,6 +190,8 @@ function VaultixProvider({
           setAppConfig(cfg);
         }
       } catch {
+      } finally {
+        if (!cancelled) setAppConfigLoaded(true);
       }
     }
     hydrate();
@@ -252,6 +255,7 @@ function VaultixProvider({
     isSignedIn: !!session,
     apiOrigin,
     appConfig,
+    appConfigLoaded,
     signOut,
     updateUser,
     connectPlatform
@@ -403,8 +407,11 @@ function SignIn({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -676,6 +683,39 @@ function SignIn({
     "forgot-verify": `Code sent to ${email}`,
     "forgot-reset": "Choose a new password"
   };
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl",
+          "backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" },
+                children: /* @__PURE__ */ jsx2(LockIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx2("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ jsx2("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1080,8 +1120,11 @@ function SignUp({
   const textColor = vars.colorText ?? "rgba(255,255,255,0.9)";
   const mutedColor = vars.colorTextMuted ?? "#475569";
   let appConfig = null;
+  let appConfigLoaded = true;
   try {
-    appConfig = useVaultixContext().appConfig;
+    const ctx = useVaultixContext();
+    appConfig = ctx.appConfig;
+    appConfigLoaded = ctx.appConfigLoaded;
   } catch {
   }
   const enabledProviders = appConfig?.providers ?? ["google", "github", "meta", "linkedin", "x", "threads"];
@@ -1174,6 +1217,37 @@ function SignUp({
     } catch {
     }
   }
+  if (!appConfigLoaded) {
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: clsx2(
+          "w-full max-w-sm mx-auto rounded-2xl border border-white/8 shadow-2xl backdrop-blur-[16px]",
+          className
+        ),
+        style: { background: cardBg },
+        "aria-busy": "true",
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "px-8 pt-8 pb-6 text-center", children: [
+            /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: "inline-flex items-center justify-center w-10 h-10 rounded-xl shadow-lg mb-4 animate-pulse",
+                style: { background: primaryColor ?? "linear-gradient(to bottom right, #7c3aed, #2563eb)" }
+              }
+            ),
+            /* @__PURE__ */ jsx3("div", { className: "h-5 w-32 mx-auto rounded bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-3 w-44 mx-auto mt-2 rounded bg-white/5 animate-pulse" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "px-8 pb-8 space-y-3", children: [
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/10 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" }),
+            /* @__PURE__ */ jsx3("div", { className: "h-11 w-full rounded-lg bg-white/5 animate-pulse" })
+          ] })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs2(
     "div",
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaultix.ai/react",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Vaultix-ID React SDK — drop-in auth components for any React app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",