chore: update carbon integration modal (#39901)

This is the CE PR for updating carbon integration modal

/ok-to-test tags="@tag.Sanity"

<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14055261316>
> Commit: 6067489ccd5c50e6d558d6d50cb52705a1bffefd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14055261316&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Tue, 25 Mar 2025 09:28:13 UTC
<!-- end of auto-generated comment: Cypress test results  -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Updated the saving indicator in the datasource editor to display a
saving state only when the active plugin is in the process of saving.
This refinement provides more accurate visual feedback on data saving
actions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/pages/Editor/DataSourceEditor/index.tsx

@@ -1199,7 +1199,7 @@ const mapStateToProps = (state: AppState, props: any): ReduxStateProps => {
     formName,
     isInsideReconnectModal: props.isInsideReconnectModal ?? false,
     pluginId,
-    isSaving: datasources.loading,
+    isSaving: datasources.loading && datasources.loadingPluginId === pluginId,
     isDeleting: !!(datasource as Datasource)?.isDeleting,
     isPluginAuthorized: !!isPluginAuthorized,
     isTesting: datasources.isTesting,

app/client/src/pages/Editor/SaaSEditor/DatasourceForm.tsx

@@ -858,7 +858,7 @@ const mapStateToProps = (state: AppState, props: any) => {
     datasourceButtonConfiguration,
     datasourceId,
     documentationLink: documentationLinks[pluginId],
-    isSaving: datasources.loading,
+    isSaving: datasources.loading && datasources.loadingPluginId === pluginId,
     isDeleting: !!datasource?.isDeleting,
     isTesting: datasources.isTesting,
     formData: formData,

app/client/src/reducers/entityReducers/datasourceReducer.ts

@@ -19,6 +19,8 @@ import { assign } from "lodash";
 export interface DatasourceDataState {
   list: Datasource[];
   loading: boolean;
+  // this prop tells which plugin is being loaded. Mainly used on the save button of datasource editor page.
+  loadingPluginId: string | null;
   loadingTokenForDatasourceId: string | null;
   isTesting: boolean;
   isListing: boolean; // fetching unconfigured datasource list
@@ -49,6 +51,7 @@ export interface DatasourceDataState {
 const initialState: DatasourceDataState = {
   list: [],
   loading: false,
+  loadingPluginId: null,
   loadingTokenForDatasourceId: null,
   isTesting: false,
   isListing: false,
@@ -118,8 +121,15 @@ const datasourceReducer = createReducer(initialState, {
   [ReduxActionTypes.FETCH_DATASOURCES_INIT]: (state: DatasourceDataState) => {
     return { ...state, loading: true };
   },
-  [ReduxActionTypes.CREATE_DATASOURCE_INIT]: (state: DatasourceDataState) => {
-    return { ...state, loading: true };
+  [ReduxActionTypes.CREATE_DATASOURCE_INIT]: (
+    state: DatasourceDataState,
+    action: ReduxAction<{ pluginId: string }>,
+  ) => {
+    return {
+      ...state,
+      loading: true,
+      loadingPluginId: action.payload.pluginId,
+    };
   },
   [ReduxActionTypes.CREATE_DATASOURCE_FROM_FORM_INIT]: (
     state: DatasourceDataState,
@@ -130,7 +140,11 @@ const datasourceReducer = createReducer(initialState, {
     state: DatasourceDataState,
     action: ReduxAction<{ loading?: boolean }>,
   ) => {
-    return { ...state, loading: !!action.payload.loading };
+    return {
+      ...state,
+      loading: !!action.payload.loading,
+      loadingPluginId: null,
+    };
   },
   [ReduxActionTypes.UPDATE_DATASOURCE_INIT]: (state: DatasourceDataState) => {
     return { ...state, loading: true };