finalize (#3398)

Co-authored-by: hagen-danswer <hagen@danswer.ai>

web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx

@@ -49,6 +49,7 @@ import { useRouter } from "next/navigation";
 import CardSection from "@/components/admin/CardSection";
 import { prepareOAuthAuthorizationRequest } from "@/lib/oauth_utils";
 import { EE_ENABLED, NEXT_PUBLIC_CLOUD_ENABLED } from "@/lib/constants";
+import TemporaryLoadingModal from "@/components/TemporaryLoadingModal";
 import { getConnectorOauthRedirectUrl } from "@/lib/connectors/oauth";
 export interface AdvancedConfig {
   refreshFreq: number;
@@ -161,6 +162,7 @@ export default function AddConnector({
   // Form context and popup management
   const { setFormStep, setAllowCreate, formStep } = useFormContext();
   const { popup, setPopup } = usePopup();
+  const [uploading, setUploading] = useState(false);
 
   // Hooks for Google Drive and Gmail credentials
   const { liveGDriveCredential } = useGoogleDriveCredentials(connector);
@@ -338,16 +340,24 @@ export default function AddConnector({
         }
         // File-specific handling
         if (connector == "file") {
-          const response = await submitFiles(
+          setUploading(true);
-            selectedFiles,
+          try {
-            setPopup,
+            const response = await submitFiles(
-            name,
+              selectedFiles,
-            access_type,
+              setPopup,
-            groups
+              name,
-          );
+              access_type,
-          if (response) {
+              groups
-            onSuccess();
+            );
+            if (response) {
+              onSuccess();
+            }
+          } catch (error) {
+            setPopup({ message: "Error uploading files", type: "error" });
+          } finally {
+            setUploading(false);
           }
+
           return;
         }
 
@@ -409,9 +419,9 @@ export default function AddConnector({
           <div className="mx-auto mb-8 w-full">
             {popup}
 
-            <div className="mb-4">
+            {uploading && (
-              <HealthCheckBanner />
+              <TemporaryLoadingModal content="Uploading files..." />
-            </div>
+            )}
 
             <AdminPageTitle
               includeDivider={false}

web/src/components/TemporaryLoadingModal.tsx

@@ -0,0 +1,14 @@
+export default function TemporaryLoadingModal({
+  content,
+}: {
+  content: string;
+}) {
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-30">
+      <div className="bg-white rounded-xl p-8 shadow-2xl flex items-center space-x-6">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-neutral-950"></div>
+        <p className="text-xl font-medium text-gray-800">{content}</p>
+      </div>
+    </div>
+  );
+}