diff --git a/apps/main/src/App.tsx b/apps/main/src/App.tsx
index 8ad7c5b..a41987e 100644
--- a/apps/main/src/App.tsx
+++ b/apps/main/src/App.tsx
@@ -62,17 +62,6 @@ export const App = () => {
onSavePreferences={saveConsent}
/>
)}
-
diff --git a/apps/main/src/main.css b/apps/main/src/main.css
index 5584365..58ea181 100644
--- a/apps/main/src/main.css
+++ b/apps/main/src/main.css
@@ -1230,6 +1230,15 @@
animation: scale-bounce 3s ease-in-out infinite;
}
+@keyframes slide {
+ 0% { transform: translateX(-100vw); }
+ 100% { transform: translateX(100vw); }
+}
+
+.animate-slide {
+ animation: slide 24s linear infinite;
+}
+
/* Animated Border Light */
@keyframes border-light {
0% {
diff --git a/apps/main/src/providers/UserStoreProvider.tsx b/apps/main/src/providers/UserStoreProvider.tsx
index 3e36fae..1e88f06 100644
--- a/apps/main/src/providers/UserStoreProvider.tsx
+++ b/apps/main/src/providers/UserStoreProvider.tsx
@@ -1,7 +1,7 @@
import { useQuery } from "@tanstack/react-query";
import { useSession } from "@xtablo/shared/contexts/SessionContext";
import { Tables } from "@xtablo/shared/types/database.types";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
import { createStore, StoreApi, useStore } from "zustand";
import { LoadingSpinner } from "../components/LoadingSpinner";
import { api } from "../lib/api";
@@ -101,19 +101,26 @@ export const UserStoreProvider = ({ children }: { children: React.ReactNode }) =
}
}, [user]);
- if (isPending && shouldFetchUser) {
- return ;
- }
+ // Use a stable store ref to avoid creating a new store on every render.
+ // Always render the Context.Provider to keep a consistent fiber tree structure —
+ // switching between `return children` and `return {children}`
+ // causes a full fiber tree restructure in React 19 concurrent mode, which triggers
+ // "insertBefore" DOM reconciliation errors.
+ const storeRef = useRef | null>(null);
- if (!user) {
- return children;
+ if (user) {
+ if (!storeRef.current) {
+ storeRef.current = createStore()(() => user);
+ } else {
+ storeRef.current.setState(() => user, true);
+ }
+ } else {
+ storeRef.current = null;
}
- const store = createStore()(() => user);
-
return (
- }>
- {children}
+
+ {isPending && shouldFetchUser ? : children}
);
};