fix: handle loading state flicker in generate (#13857)

Author: bnchrch

airbyte-webapp/src/pages/connectorBuilder/ConnectorBuilderGeneratePage/ConnectorBuilderGeneratePage.tsx

@@ -21,6 +21,7 @@ import { Text } from "components/ui/Text";
 
 import { useBuilderAssistCreateConnectorMutation } from "core/api";
 import { DeclarativeComponentSchema, DeclarativeStream } from "core/api/types/ConnectorManifest";
+import { useDebounceValue } from "core/utils/useDebounceValue";
 import { ConnectorBuilderLocalStorageProvider } from "services/connectorBuilder/ConnectorBuilderLocalStorageService";
 import { ConnectorBuilderFormManagementStateProvider } from "services/connectorBuilder/ConnectorBuilderStateService";
 
@@ -37,9 +38,14 @@ interface GeneratorFormResponse {
 }
 
 const ConnectorBuilderGeneratePageInner: React.FC = () => {
-  const { createAndNavigate, isLoading } = useCreateAndNavigate();
+  const { createAndNavigate, isLoading: isCreateLoading } = useCreateAndNavigate();
   const { mutateAsync: getAssistValues, isLoading: isAssistLoading } = useBuilderAssistCreateConnectorMutation();
 
+  // Ensure we don't show the loading spinner too early
+  const isLoading = isCreateLoading || isAssistLoading;
+  const debounceTime = isLoading ? 500 : 0;
+  const isLoadingWithDelay = useDebounceValue(isCreateLoading || isAssistLoading, debounceTime);
+
   // These are stored to ensure we persist form values even if the user skips the assist
   const [submittedAssistValues, setSubmittedAssistValues] = useState<GeneratorFormResponse | null>(null);
   const projectName = submittedAssistValues?.name || DEFAULT_CONNECTOR_NAME;
@@ -88,10 +94,10 @@ const ConnectorBuilderGeneratePageInner: React.FC = () => {
   return (
     <FlexContainer direction="column" gap="2xl" className={styles.container}>
       <AirbyteTitle title={<FormattedMessage id="connectorBuilder.generatePage.prompt" />} />
-      {isAssistLoading ? (
+      {isLoadingWithDelay ? (
         <AssistWaiting onSkip={onSkip} />
       ) : (
-        <ConnectorBuilderGenerateForm isLoading={isLoading} onSubmit={onFormSubmit} onCancel={onCancel} />
+        <ConnectorBuilderGenerateForm isLoading={isCreateLoading} onSubmit={onFormSubmit} onCancel={onCancel} />
       )}
     </FlexContainer>
   );