diff --git a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
index 710df861a6..dbb3cfdf15 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/DBForm.tsx
@@ -28,6 +28,8 @@ import Boxed from "components/editorComponents/Onboarding/Boxed";
 import { OnboardingStep } from "constants/OnboardingConstants";
 import { isHidden } from "components/formControls/utils";
 import log from "loglevel";
+import { Spinner } from "@blueprintjs/core";
+import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
 
 const { cloudHosting } = getAppsmithConfigs();
 
@@ -41,6 +43,7 @@ interface DatasourceDBEditorProps {
   isDeleting: boolean;
   datasourceId: string;
   applicationId: string;
+  loadingFormConfigs: boolean;
   pageId: string;
   formData: Datasource;
   isTesting: boolean;
@@ -58,6 +61,10 @@ interface DatasourceDBEditorState {
 type Props = DatasourceDBEditorProps &
   InjectedFormProps<Datasource, DatasourceDBEditorProps>;
 
+export const LoadingContainer = styled(CenteredWrapper)`
+  height: 50%;
+`;
+
 const DBForm = styled.div`
   padding: 20px;
   margin-left: 10px;
@@ -208,7 +215,14 @@ class DatasourceDBEditor extends React.Component<
   };
 
   render() {
-    const { formConfig } = this.props;
+    const { formConfig, loadingFormConfigs } = this.props;
+    if (loadingFormConfigs) {
+      return (
+        <LoadingContainer>
+          <Spinner size={30} />
+        </LoadingContainer>
+      );
+    }
     const content = this.renderDataSourceConfigForm(formConfig);
     return <DBForm>{content}</DBForm>;
   }
diff --git a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
index 731a5465a3..9e51c1b045 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/RestAPIDatasourceForm.tsx
@@ -19,6 +19,8 @@ import Boxed from "components/editorComponents/Onboarding/Boxed";
 import { OnboardingStep } from "constants/OnboardingConstants";
 import { isHidden } from "components/formControls/utils";
 import log from "loglevel";
+import { Spinner } from "@blueprintjs/core";
+import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
 
 interface DatasourceDBEditorProps {
   onSave: (formValues: Datasource) => void;
@@ -29,6 +31,7 @@ interface DatasourceDBEditorProps {
   isSaving: boolean;
   isDeleting: boolean;
   datasourceId: string;
+  loadingFormConfigs: boolean;
   applicationId: string;
   pageId: string;
   formData: Datasource;
@@ -64,6 +67,10 @@ const DBForm = styled.div`
   }
 `;
 
+export const LoadingContainer = styled(CenteredWrapper)`
+  height: 50%;
+`;
+
 const PluginImage = styled.img`
   height: 40px;
   width: auto;
@@ -186,7 +193,14 @@ class DatasourceDBEditor extends React.Component<
   };
 
   render() {
-    const { formConfig } = this.props;
+    const { loadingFormConfigs, formConfig } = this.props;
+    if (loadingFormConfigs) {
+      return (
+        <LoadingContainer>
+          <Spinner size={30} />
+        </LoadingContainer>
+      );
+    }
     const content = this.renderDataSourceConfigForm(formConfig);
     return <DBForm>{content}</DBForm>;
   }
diff --git a/app/client/src/pages/Editor/DataSourceEditor/index.tsx b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
index b8e46b2418..4ee03c97e6 100644
--- a/app/client/src/pages/Editor/DataSourceEditor/index.tsx
+++ b/app/client/src/pages/Editor/DataSourceEditor/index.tsx
@@ -24,13 +24,6 @@ import { Datasource } from "entities/Datasource";
 import { RouteComponentProps } from "react-router";
 import EntityNotFoundPane from "pages/Editor/EntityNotFoundPane";
 import { PluginType } from "entities/Action";
-import { Spinner } from "@blueprintjs/core";
-import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
-import styled from "styled-components";
-
-export const LoadingContainer = styled(CenteredWrapper)`
-  height: 50%;
-`;
 
 interface ReduxStateProps {
   formData: Datasource;
@@ -112,13 +105,6 @@ class DataSourceEditor extends React.Component<Props> {
         />
       );
     }
-    if (loadingFormConfigs) {
-      return (
-        <LoadingContainer>
-          <Spinner size={30} />
-        </LoadingContainer>
-      );
-    }
     const DatasourceForm =
       pluginType === PluginType.API
         ? RestAPIDatasourceForm
@@ -137,6 +123,7 @@ class DataSourceEditor extends React.Component<Props> {
         onTest={this.props.testDatasource}
         selectedPluginPackage={selectedPluginPackage}
         datasourceId={datasourceId}
+        loadingFormConfigs={loadingFormConfigs}
         formData={formData}
         formConfig={formConfig}
         handleDelete={deleteDatasource}