Adding in a quick fix to make sure a store is active before hydration

 completes.

src/components/shared/Entity/ExistingEntityCards/Store/Hydrator.tsx

@@ -1,6 +1,7 @@
 import {
     useExistingEntity_hydrated,
     useExistingEntity_hydrateState,
+    useExistingEntity_setActive,
     useExistingEntity_setHydrated,
     useExistingEntity_setHydrationErrorsExist,
 } from 'components/shared/Entity/ExistingEntityCards/Store/hooks';
@@ -17,7 +18,7 @@ function ExistingEntityHydrator({ children }: BaseComponentProps) {
 
     const hydrated = useExistingEntity_hydrated();
     const setHydrated = useExistingEntity_setHydrated();
-
+    const setActive = useExistingEntity_setActive();
     const setHydrationErrorsExist = useExistingEntity_setHydrationErrorsExist();
 
     const hydrateState = useExistingEntity_hydrateState();
@@ -28,6 +29,7 @@ function ExistingEntityHydrator({ children }: BaseComponentProps) {
             connectorId &&
             (entityType === 'capture' || entityType === 'materialization')
         ) {
+            setActive(true);
             hydrateState(entityType, connectorId).then(
                 () => {
                     setHydrated(true);
@@ -39,12 +41,13 @@ function ExistingEntityHydrator({ children }: BaseComponentProps) {
             );
         }
     }, [
-        hydrateState,
-        setHydrated,
-        setHydrationErrorsExist,
         connectorId,
         entityType,
+        hydrateState,
         hydrated,
+        setActive,
+        setHydrated,
+        setHydrationErrorsExist,
     ]);
 
     // eslint-disable-next-line react/jsx-no-useless-fragment

src/components/shared/Entity/ExistingEntityCards/Store/hooks.ts

@@ -30,6 +30,15 @@ export const useExistingEntity_setHydrated = () => {
     >(getStoreName(entityType), (state) => state.setHydrated);
 };
 
+export const useExistingEntity_setActive = () => {
+    const entityType = useEntityType();
+
+    return useZustandStore<
+        ExistingEntityState,
+        ExistingEntityState['setActive']
+    >(getStoreName(entityType), (state) => state.setActive);
+};
+
 export const useExistingEntity_setHydrationErrorsExist = () => {
     const entityType = useEntityType();
 

src/stores/DetailsForm/Hydrator.tsx

@@ -5,6 +5,7 @@ import { logRocketConsole } from 'services/logrocket';
 import {
     useDetailsForm_hydrated,
     useDetailsForm_hydrateState,
+    useDetailsForm_setActive,
     useDetailsForm_setHydrated,
     useDetailsForm_setHydrationErrorsExist,
 } from 'stores/DetailsForm/hooks';
@@ -16,7 +17,7 @@ export const DetailsFormHydrator = ({ children }: BaseComponentProps) => {
 
     const hydrated = useDetailsForm_hydrated();
     const setHydrated = useDetailsForm_setHydrated();
-
+    const setActive = useDetailsForm_setActive();
     const setHydrationErrorsExist = useDetailsForm_setHydrationErrorsExist();
 
     const hydrateState = useDetailsForm_hydrateState();
@@ -26,6 +27,7 @@ export const DetailsFormHydrator = ({ children }: BaseComponentProps) => {
             !hydrated &&
             (entityType === 'capture' || entityType === 'materialization')
         ) {
+            setActive(true);
             hydrateState(entityType, workflow).then(
                 () => {
                     setHydrated(true);

src/stores/DetailsForm/hooks.ts

@@ -192,6 +192,15 @@ export const useDetailsForm_setHydrated = () => {
     );
 };
 
+export const useDetailsForm_setActive = () => {
+    const entityType = useEntityType();
+
+    return useZustandStore<DetailsFormState, DetailsFormState['setActive']>(
+        getStoreName(entityType),
+        (state) => state.setActive
+    );
+};
+
 export const useDetailsForm_hydrationErrorsExist = () => {
     const entityType = useEntityType();
 

src/stores/EndpointConfig/Hydrator.tsx

@@ -5,6 +5,7 @@ import { logRocketConsole } from 'services/logrocket';
 import {
     useEndpointConfig_hydrated,
     useEndpointConfig_hydrateState,
+    useEndpointConfig_setActive,
     useEndpointConfig_setHydrated,
     useEndpointConfig_setHydrationErrorsExist,
 } from 'stores/EndpointConfig/hooks';
@@ -18,12 +19,14 @@ export const EndpointConfigHydrator = ({ children }: BaseComponentProps) => {
     const setHydrated = useEndpointConfig_setHydrated();
     const setHydrationErrorsExist = useEndpointConfig_setHydrationErrorsExist();
     const hydrateState = useEndpointConfig_hydrateState();
+    const setActive = useEndpointConfig_setActive();
 
     useEffectOnce(() => {
         if (
             !hydrated &&
             (entityType === 'capture' || entityType === 'materialization')
         ) {
+            setActive(true);
             hydrateState(entityType, workflow).then(
                 () => {
                     setHydrated(true);

src/stores/EndpointConfig/Store.ts

@@ -198,42 +198,36 @@ const getInitialState = (
         const liveSpecId = searchParams.get(GlobalSearchParams.LIVE_SPEC_ID);
         const draftId = searchParams.get(GlobalSearchParams.DRAFT_ID);
 
+        get().setHydrated(false);
+
         if (
             workflow === 'capture_create' ||
             workflow === 'materialization_create'
         ) {
-            const { setServerUpdateRequired } = get();
-
-            setServerUpdateRequired(true);
+            get().setServerUpdateRequired(true);
         }
 
-        if (connectorId) {
+        if (get().active && connectorId) {
             const { data, error } = await getSchema_Endpoint(connectorId);
 
             if (error) {
-                const { setHydrationErrorsExist } = get();
-
-                setHydrationErrorsExist(true);
+                get().setHydrationErrorsExist(true);
             }
 
-            if (data && data.length > 0) {
-                const { setEndpointSchema } = get();
-
-                setEndpointSchema(
+            if (get().active && data && data.length > 0) {
+                get().setEndpointSchema(
                     data[0].endpoint_spec_schema as unknown as Schema
                 );
             }
         }
 
-        if (liveSpecId) {
+        if (get().active && liveSpecId) {
             const { data, error } = draftId
                 ? await getDraftSpecsByDraftId(draftId, entityType)
                 : await getLiveSpecsByLiveSpecId(liveSpecId, entityType);
 
             if (error) {
-                const { setHydrationErrorsExist } = get();
-
-                setHydrationErrorsExist(true);
+                get().setHydrationErrorsExist(true);
             }
 
             if (data && data.length > 0) {

src/stores/EndpointConfig/hooks.ts

@@ -183,6 +183,15 @@ export const useEndpointConfig_hydrateState = () => {
     >(getStoreName(entityType), (state) => state.hydrateState);
 };
 
+export const useEndpointConfig_setActive = () => {
+    const entityType = useEntityType();
+
+    return useZustandStore<
+        EndpointConfigState,
+        EndpointConfigState['setActive']
+    >(getStoreName(entityType), (state) => state.setActive);
+};
+
 export const useEndpointConfig_serverUpdateRequired = () => {
     const entityType = useEntityType();
 

src/stores/Entities/hooks.ts

@@ -72,6 +72,12 @@ export const useEntitiesStore_setHydrated = () => {
         (state) => state.setHydrated
     );
 };
+export const useEntitiesStore_setActive = () => {
+    return useZustandStore<EntitiesState, EntitiesState['setActive']>(
+        GlobalStoreNames.ENTITIES,
+        (state) => state.setActive
+    );
+};
 export const useEntitiesStore_hydrationErrors = () => {
     return useZustandStore<EntitiesState, EntitiesState['hydrationErrors']>(
         GlobalStoreNames.ENTITIES,
@@ -107,10 +113,12 @@ export const useSidePanelDocsStore_resetState = () => {
 // We hardcode the key here as we only call once
 export const useHydrateState = () => {
     const hydrateState = useEntitiesStore_hydrateState();
+    const setActive = useEntitiesStore_setActive();
 
     const response = useSWR(
         'entities_hydrator',
         () => {
+            setActive(true);
             return hydrateState();
         },
         singleCallSettings

src/stores/ResourceConfig/Hydrator.tsx

@@ -8,6 +8,7 @@ import { BaseComponentProps } from 'types';
 import {
     useResourceConfig_hydrated,
     useResourceConfig_hydrateState,
+    useResourceConfig_setActive,
     useResourceConfig_setHydrated,
     useResourceConfig_setHydrationErrorsExist,
 } from './hooks';
@@ -23,12 +24,13 @@ export const ResourceConfigHydrator = ({ children }: BaseComponentProps) => {
 
     const hydrated = useResourceConfig_hydrated();
     const setHydrated = useResourceConfig_setHydrated();
-
+    const setActive = useResourceConfig_setActive();
     const setHydrationErrorsExist = useResourceConfig_setHydrationErrorsExist();
 
     const hydrateState = useResourceConfig_hydrateState();
 
     const hydrateTheState = (rehydrating: boolean) => {
+        setActive(true);
         hydrateState(editWorkflow, entityType, rehydrating).then(
             () => {
                 setHydrated(true);

src/stores/ResourceConfig/Store.ts

@@ -18,6 +18,10 @@ import {
     sortBy,
 } from 'lodash';
 import { createJSONFormDefaults } from 'services/ajv';
+import {
+    getInitialHydrationData,
+    getStoreWithHydrationSettings,
+} from 'stores/extensions/Hydration';
 import { ResourceConfigStoreNames } from 'stores/names';
 import { Schema } from 'types';
 import { devtoolsOptions } from 'utils/store-utils';
@@ -26,6 +30,8 @@ import { create, StoreApi } from 'zustand';
 import { devtools, NamedSet } from 'zustand/middleware';
 import { ResourceConfigDictionary, ResourceConfigState } from './types';
 
+const STORE_KEY = 'Resource Config';
+
 const populateCollections = (
     state: ResourceConfigState,
     collections: string[]
@@ -139,13 +145,15 @@ const getInitialMiscStoreData = (): Pick<
 const getInitialStateData = () => ({
     ...getInitialCollectionStateData(),
     ...getInitialMiscStoreData(),
+    ...getInitialHydrationData(),
 });
 
 const getInitialState = (
     set: NamedSet<ResourceConfigState>,
     get: StoreApi<ResourceConfigState>['getState']
 ): ResourceConfigState => ({
     ...getInitialStateData(),
+    ...getStoreWithHydrationSettings(STORE_KEY, set),
 
     preFillEmptyCollections: (value, rehydrating) => {
         set(

src/stores/ResourceConfig/hooks.ts

@@ -232,6 +232,13 @@ export const useResourceConfig_setHydrated = () => {
     >(ResourceConfigStoreNames.GENERAL, (state) => state.setHydrated);
 };
 
+export const useResourceConfig_setActive = () => {
+    return useZustandStore<
+        ResourceConfigState,
+        ResourceConfigState['setActive']
+    >(ResourceConfigStoreNames.GENERAL, (state) => state.setActive);
+};
+
 export const useResourceConfig_hydrationErrorsExist = () => {
     return useZustandStore<
         ResourceConfigState,

src/stores/ResourceConfig/types.ts

@@ -1,6 +1,7 @@
 import { DraftSpecQuery } from 'hooks/useDraftSpecs';
 import { LiveSpecsExt_MaterializeCapture } from 'hooks/useLiveSpecsExt';
 import { CallSupabaseResponse } from 'services/supabase';
+import { StoreWithHydration } from 'stores/extensions/Hydration';
 import { Entity, EntityWorkflow, JsonFormsData, Schema } from 'types';
 
 export interface ResourceConfig extends JsonFormsData {
@@ -14,7 +15,7 @@ export interface ResourceConfigDictionary {
 
 // TODO (naming): Determine whether the resourceConfig state property should be made plural.
 //   It is a dictionary of individual resource configs, so I am leaning "yes."
-export interface ResourceConfigState {
+export interface ResourceConfigState extends StoreWithHydration {
     // Collection Selector
     collections: string[] | null;
     preFillEmptyCollections: (
@@ -63,13 +64,6 @@ export interface ResourceConfigState {
     resourceSchema: Schema;
     setResourceSchema: (val: ResourceConfigState['resourceSchema']) => void;
 
-    // Hydration
-    hydrated: boolean;
-    setHydrated: (value: boolean) => void;
-
-    hydrationErrorsExist: boolean;
-    setHydrationErrorsExist: (value: boolean) => void;
-
     hydrateState: (
         editWorkflow: boolean,
         entityType: Entity,

src/stores/extensions/Hydration.ts

@@ -10,12 +10,18 @@ export interface StoreWithHydration {
 
     hydrationErrorsExist: boolean;
     setHydrationErrorsExist: (value: boolean) => void;
+
+    // TODO (store hydration) we need to make store hydration better
+    // Used to keep track if the store should be getting hydrated
+    active: boolean;
+    setActive: (val: boolean) => void;
 }
 
 export const getInitialHydrationData = (): Pick<
     StoreWithHydration,
-    'hydrated' | 'hydrationErrorsExist'
+    'hydrated' | 'hydrationErrorsExist' | 'active'
 > => ({
+    active: false,
     hydrated: false,
     hydrationErrorsExist: false,
 });
@@ -34,7 +40,7 @@ export const getStoreWithHydrationSettings = (
         setHydrated: (value) => {
             set(
                 produce((state: StoreWithHydration) => {
-                    state.hydrated = value;
+                    state.hydrated = value && state.active ? value : false;
                 }),
                 false,
                 `${key} State Hydrated`
@@ -44,12 +50,23 @@ export const getStoreWithHydrationSettings = (
         setHydrationErrorsExist: (value) => {
             set(
                 produce((state: StoreWithHydration) => {
-                    state.hydrationErrorsExist = value;
+                    state.hydrationErrorsExist =
+                        value && state.active ? value : false;
                 }),
                 false,
                 `${key} Hydration Errors Detected`
             );
         },
+
+        setActive: (val) => {
+            set(
+                produce((state: StoreWithHydration) => {
+                    state.active = val;
+                }),
+                false,
+                `${key} Active Set`
+            );
+        },
     };
 };