datasource list loading fix

Author: raheeliftikhar5

client/packages/lowcoder/src/constants/reduxActionConstants.ts

@@ -227,6 +227,8 @@ export const ReduxActionErrorTypes = {
   CREATE_APP_SNAPSHOT_ERROR: "CREATE_APP_SNAPSHOT_ERROR",
   FETCH_APP_SNAPSHOTS_ERROR: "FETCH_APP_SNAPSHOTS_ERROR",
   FETCH_APP_SNAPSHOT_DSL_ERROR: "FETCH_APP_SNAPSHOT_DSL_ERROR",
+
+  FETCH_DATASOURCE_ERROR: "FETCH_DATASOURCE_ERROR",
 };
 
 export type ReduxActionType = typeof ReduxActionTypes[keyof typeof ReduxActionTypes];

client/packages/lowcoder/src/pages/datasource/datasourceList.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { EditPopover, PointIcon, Search, TacoButton } from "lowcoder-design";
 import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { getDataSource, getDataSourceTypesMap } from "../../redux/selectors/datasourceSelectors";
+import { getDataSource, getDataSourceLoading, getDataSourceTypesMap } from "../../redux/selectors/datasourceSelectors";
 import { deleteDatasource } from "../../redux/reduxActions/datasourceActions";
 import { isEmpty } from "lodash";
 import history from "../../util/history";
@@ -106,6 +106,7 @@ export const DatasourceList = () => {
   const [isCreateFormShow, showCreateForm] = useState(false);
   const [shareDatasourceId, setShareDatasourceId] = useState<string | undefined>(undefined);
   const datasource = useSelector(getDataSource);
+  const datasourceLoading = useSelector(getDataSourceLoading);
   const plugins = useSelector(getDataSourceTypesMap);
 
   return (
@@ -147,7 +148,7 @@ export const DatasourceList = () => {
         <BodyWrapper>
           <StyledTable
             loading={{
-              spinning: !datasource.length,
+              spinning: datasourceLoading,
               indicator: <LoadingOutlined spin style={{ fontSize: 30 }} />
             }}
             rowClassName={(record: any) => (!record.edit ? "datasource-can-not-edit" : "")}

client/packages/lowcoder/src/redux/reducers/entitiyReducers/datasourceReducer.ts

@@ -1,5 +1,5 @@
 import { createReducer } from "util/reducerUtils";
-import { ReduxAction, ReduxActionTypes } from "constants/reduxActionConstants";
+import { ReduxAction, ReduxActionErrorTypes, ReduxActionTypes } from "constants/reduxActionConstants";
 import { DatasourceInfo, DatasourceStructure } from "api/datasourceApi";
 import { Datasource } from "@lowcoder-ee/constants/datasourceConstants";
 import { DatasourcePermissionInfo } from "../../../api/datasourcePermissionApi";
@@ -13,25 +13,58 @@ export interface DatasourceDataState {
   data: DatasourceInfo[];
   structure: Record<string, DatasourceStructure[]>;
   permissionInfo: Record<string, DatasourcePermissionInfo>;
+  loadingStates: {
+    fetchingDatasources?: boolean;
+    fetchingStructure?: boolean;
+  };
 }
 
 const initialState: DatasourceDataState = {
   data: [],
   structure: {},
   permissionInfo: {},
+  loadingStates: {
+    fetchingDatasources: false,
+    fetchingStructure: false,
+  }
 };
 
 const datasourceReducer = createReducer(initialState, {
+  [ReduxActionTypes.FETCH_DATASOURCE_INIT]: (
+    state: DatasourceDataState
+  ): DatasourceDataState => {
+    return {
+      ...state,
+      loadingStates: {
+        ...state.loadingStates,
+        fetchingDatasources: true,
+      },
+    };
+  },
   [ReduxActionTypes.FETCH_DATASOURCE_SUCCESS]: (
     state: DatasourceDataState,
     action: ReduxAction<DatasourceInfo[]>
   ): DatasourceDataState => {
     return {
       ...state,
       data: action.payload,
+      loadingStates: {
+        ...state.loadingStates,
+        fetchingDatasources: false,
+      },
+    };
+  },
+  [ReduxActionErrorTypes.FETCH_DATASOURCE_ERROR]: (
+    state: DatasourceDataState,
+  ):  DatasourceDataState => {
+    return {
+      ...state,
+      loadingStates: {
+        ...state.loadingStates,
+        fetchingDatasources: false,
+      },
     };
   },
-
   [ReduxActionTypes.FETCH_DATASOURCE_STRUCTURE_SUCCESS]: (
     state: DatasourceDataState,
     action: ReduxAction<Record<string, DatasourceStructure[]>>

client/packages/lowcoder/src/redux/sagas/datasourceSagas.ts

@@ -1,5 +1,6 @@
 import {
   EvaluationReduxAction,
+  ReduxActionErrorTypes,
   ReduxActionTypes,
   ReduxActionWithCallbacks,
 } from "constants/reduxActionConstants";
@@ -33,6 +34,9 @@ export function* fetchDatasourceSaga(action: EvaluationReduxAction<FetchDatasour
   } catch (error: any) {
     log.error("fetch datasource error: ", error);
     messageInstance.error(error.message);
+    yield put({
+      type: ReduxActionErrorTypes.FETCH_DATASOURCE_ERROR,
+    });
   }
 }
 

client/packages/lowcoder/src/redux/selectors/datasourceSelectors.ts

@@ -6,6 +6,10 @@ export const getDataSource = (state: AppState) => {
   return state.entities.datasource.data;
 };
 
+export const getDataSourceLoading = (state: AppState) => {
+  return state.entities.datasource.loadingStates.fetchingDatasources;
+};
+
 export const getDataSourceTypes = (state: AppState) => {
   return state.entities.plugins.data;
 };