diff --git a/libs/features/restate-context/src/lib/RestateContext.tsx b/libs/features/restate-context/src/lib/RestateContext.tsx index 5d8a649b..ce1b87a3 100644 --- a/libs/features/restate-context/src/lib/RestateContext.tsx +++ b/libs/features/restate-context/src/lib/RestateContext.tsx @@ -49,13 +49,18 @@ export function RestateContextProvider({ children, adminBaseUrl, ingressUrl, + isPending, }: PropsWithChildren<{ adminBaseUrl?: string; ingressUrl: string; + isPending?: boolean; }>) { return ( - + {children} diff --git a/libs/ui/button/src/lib/SubmitButton.tsx b/libs/ui/button/src/lib/SubmitButton.tsx index 9470fdcf..731dcc2d 100644 --- a/libs/ui/button/src/lib/SubmitButton.tsx +++ b/libs/ui/button/src/lib/SubmitButton.tsx @@ -1,5 +1,5 @@ import { useRef, type PropsWithChildren, useDeferredValue } from 'react'; -import { useFetchers, useHref } from 'react-router'; +import { useFetchers, useHref, useNavigation } from 'react-router'; import { Button } from './Button'; import { tv } from 'tailwind-variants'; import { useIsMutating } from '@tanstack/react-query'; @@ -45,8 +45,11 @@ function useIsSubmitting(action?: string) { return formActionPathname === pathName; }, }); + const { state } = useNavigation(); - return submitFetcher?.state === 'submitting' || isMutating > 0; + return ( + submitFetcher?.state === 'submitting' || isMutating > 0 || state !== 'idle' + ); } export function SubmitButton({ diff --git a/libs/util/feature-flag/src/lib/type.ts b/libs/util/feature-flag/src/lib/type.ts index 03bf507a..23bc0e92 100644 --- a/libs/util/feature-flag/src/lib/type.ts +++ b/libs/util/feature-flag/src/lib/type.ts @@ -1 +1 @@ -export type FeatureFlag = 'FEATURE_OVERVIEW_PAGE'; +export type FeatureFlag = 'FEATURE_OVERVIEW_PAGE' | 'FEATURE_INVOCATIONS_PAGE'; diff --git a/libs/util/remix/src/lib/useFetcherWithErrors.ts b/libs/util/remix/src/lib/useFetcherWithErrors.ts index 1a680e21..feb94af2 100644 --- a/libs/util/remix/src/lib/useFetcherWithErrors.ts +++ b/libs/util/remix/src/lib/useFetcherWithErrors.ts @@ -5,12 +5,17 @@ export function useFetcherWithError< TData extends ( params: ClientActionFunctionArgs ) => Promise<{ errors?: Error[] } | any> ->({ key }: { key: string }) { +>({ key, method }: { key: string; method: string }) { const fetcher = useFetcher({ key }); const [errors, setErrors] = useState(); const [canUpdateErrors, setCanUpdateErrors] = useState(true); - if (fetcher.state === 'submitting' && !canUpdateErrors) { + if ( + fetcher.state === 'submitting' && + !canUpdateErrors && + fetcher.formAction === key && + fetcher.formMethod === method + ) { setCanUpdateErrors(true); } if (fetcher.state === 'submitting' && errors) {