diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
index 48d573fdd..b2f746454 100644
--- a/client/packages/lowcoder/src/api/commonSettingApi.ts
+++ b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -79,6 +79,7 @@ export interface ThemeDetail {
   components?: Record<string, JSONObject>;
   showComponentLoadingIndicators?: boolean;
   showDataLoadingIndicators?: boolean;
+  dataLoadingIndicator?: string;
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
diff --git a/client/packages/lowcoder/src/components/ModuleLoading.tsx b/client/packages/lowcoder/src/components/ModuleLoading.tsx
index 5d3901c8d..37312bc5a 100644
--- a/client/packages/lowcoder/src/components/ModuleLoading.tsx
+++ b/client/packages/lowcoder/src/components/ModuleLoading.tsx
@@ -1,3 +1,4 @@
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
 import { default as Spin } from "antd/es/spin";
 import { GreyTextColor } from "constants/style";
 import styled from "styled-components";
@@ -14,7 +15,7 @@ export const LoadingPlaceholder = styled.div`
 export function ModuleLoading() {
   return (
     <LoadingPlaceholder>
-      <Spin />
+      <Spin indicator={<LoadingOutlined style={{ fontSize: 15 }} spin />} />
     </LoadingPlaceholder>
   );
 }
diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
index 50f13ffdc..f2004d43a 100644
--- a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
+++ b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx
@@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt
 import { isValidColor, isValidGradient, toHex } from "components/colorSelect/colorUtils";
 import { ColorSelect } from "components/colorSelect";
 import { TacoInput } from "components/tacoInput";
-import { Slider, Switch } from "antd";
+import { Segmented, Slider, Switch } from "antd";
 import { 
   ExpandIcon, 
   CompressIcon,
@@ -28,6 +28,7 @@ export type configChangeParams = {
   components?: Record<string, object>,
   showComponentLoadingIndicators?: boolean;
   showDataLoadingIndicators?: boolean;
+  dataLoadingIndicator?: string;
   gridColumns?: string;
   gridRowHeight?: string;
   gridRowCount?: number;
@@ -58,6 +59,7 @@ type ColorConfigProps = {
   padding?: string;
   showComponentLoadingIndicators?: boolean;
   showDataLoadingIndicators?: boolean;
+  dataLoadingIndicator?: string;
   gridColumns?: string;
   gridRowHeight?: string;
   gridRowCount?: number;
@@ -87,6 +89,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
     fontFamily: defaultFontFamily,
     showComponentLoadingIndicators: defaultShowComponentLoaders,
     showDataLoadingIndicators: defaultShowDataLoaders,
+    dataLoadingIndicator: defaultDataLoadingIndicator,
     gridColumns: defaultGridColumns,
     gridRowHeight: defaultGridRowHeight,
     gridRowCount: defaultGridRowCount,
@@ -110,6 +113,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
   const [fontFamily, setFontFamily] = useState(defaultFontFamily);
   const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders);
   const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders);
+  const [dataLoadingIndicator, setDataLoadingIndicator] = useState(defaultDataLoadingIndicator);
   const [gridColumns, setGridColumns] = useState(defaultGridColumns); 
   const [gridRowHeight, setGridRowHeight] = useState(defaultGridRowHeight); 
   const [gridRowCount, setGridRowCount] = useState(defaultGridRowCount); 
@@ -346,6 +350,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
     setDataLoaders(defaultShowDataLoaders);
   }, [defaultShowDataLoaders]);
 
+  useEffect(() => {
+    setDataLoadingIndicator(defaultDataLoadingIndicator);
+  }, [defaultDataLoadingIndicator]);
+
   useEffect(() => {
     setGridPaddingX(defaultGridPaddingX);
   }, [defaultGridPaddingX]);
@@ -375,6 +383,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
         themeSettingKey !== "fontFamily" && 
         themeSettingKey !== "showComponentLoadingIndicators" && 
         themeSettingKey !== "showDataLoadingIndicators" &&
+        themeSettingKey !== "dataLoadingIndicator" &&
         themeSettingKey !== "gridColumns" &&
         themeSettingKey !== "gridRowHeight" &&
         themeSettingKey !== "gridRowCount" &&
@@ -551,6 +560,25 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
         </div>
       )}
 
+      {themeSettingKey === "dataLoadingIndicator" && (
+        <div style={{
+          marginTop: '6px',
+        }}>
+          <Segmented
+            block
+            value={dataLoadingIndicator}
+            options={[
+              { value: 'spinner', label: 'Spinner' },
+              { value: 'skeleton', label: 'Skeleton' },
+            ]}
+            onChange={(value) => {
+              setDataLoadingIndicator(value)
+              configChange({ themeSettingKey, dataLoadingIndicator: value});
+            }}
+          />
+        </div>
+      )}
+
       {themeSettingKey === "gridColumns" && (
         <div className="config-input">
           <GridColumns $gridColumns={defaultGridColumns || "24"}>
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index 356392405..fc7f6f433 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -18,7 +18,7 @@ import {
   withExposingConfigs,
 } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { NumberControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
@@ -253,6 +253,7 @@ let AvatarBasicComp = (function () {
         {<BadgeBasicSection {...children} />}
         <Section name={sectionNames.interaction}>
           {children.onEvent.getPropertyView()}
+          {showDataLoadingIndicatorsPropertyView(children)}
         </Section>
         <Section name={sectionNames.layout}>
           {hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index e0fdf7b4b..43cb5959a 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -14,6 +14,7 @@ import {
   hiddenPropertyView,
   disabledPropertyView,
   loadingPropertyView,
+  showDataLoadingIndicatorsPropertyView,
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { IconControl } from "comps/controls/iconControl";
@@ -129,6 +130,7 @@ const LinkTmpComp = (function () {
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
               {loadingPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
               <Section name={sectionNames.advanced}>
                 {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index 3fa93e028..74f9f8a55 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -16,7 +16,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { CustomModal, Section, sectionNames } from "lowcoder-design";
 import styled from "styled-components";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
-import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import React, { Suspense, useEffect, useRef, useState, useContext } from "react";
 import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
@@ -223,6 +223,7 @@ const ScannerTmpComp = (function () {
                 {children.onEvent.getPropertyView()}
                 {disabledPropertyView(children)}
                 {hiddenPropertyView(children)}
+                {showDataLoadingIndicatorsPropertyView(children)}
               </Section>
               <Section name={sectionNames.advanced}>
               {children.continuous.propertyView({ label: trans("scanner.continuous") })}
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
index 5586c3bde..f78fee7bb 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx
@@ -5,6 +5,7 @@ import {
   disabledPropertyView,
   hiddenPropertyView,
   loadingPropertyView,
+  showDataLoadingIndicatorsPropertyView,
 } from "comps/utils/propertyUtils";
 import { Section, sectionNames } from "lowcoder-design";
 import { trans } from "i18n";
@@ -109,6 +110,7 @@ const ToggleTmpComp = (function () {
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
               {loadingPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
             <Section name={sectionNames.advanced}>
               {children.showText.propertyView({ label: trans("toggleButton.showText") })}
diff --git a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
index 9a14ba22d..4fb21b69f 100644
--- a/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx
@@ -12,7 +12,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 // Right-side attribute subframe
 import { Section, sectionNames } from "lowcoder-design";
 // Switch indicating whether the component is hidden or not
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 // Right property switch
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl"; //样式输入框
@@ -406,6 +406,7 @@ let CommentBasicComp = (function () {
               {children.deleteAble.propertyView({
                 label: trans("comment.deleteAble"),
               })}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           </>
         )}
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index f9a14575f..c7e1201bc 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -5,7 +5,7 @@ import { TriContainer } from "../triContainerComp/triContainer";
 import {
   ContainerCompBuilder,
 } from "../triContainerComp/triContainerCompBuilder";
-import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
+import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { BoolControl } from "comps/controls/boolControl";
@@ -318,8 +318,9 @@ export const ContainerBaseComp = (function () {
 
               </Section>
               <Section name={sectionNames.interaction}>
-                {hiddenPropertyView(children)}
                 {children.onEvent.getPropertyView()}
+                {hiddenPropertyView(children)}
+                {showDataLoadingIndicatorsPropertyView(children)}
               </Section>
             </>
           )}
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index b33d74ae6..d91a6170b 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -9,7 +9,7 @@ import { useEffect, useRef, useContext } from "react";
 import styled from "styled-components";
 import { getPromiseAfterDispatch } from "util/promiseUtils";
 import { EventData, EventTypeEnum } from "./types";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
 import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
@@ -244,6 +244,7 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
               {children.model.propertyView({ label: trans("customComp.data") })}
               {children.code.propertyView({ label: trans("customComp.code"), language: "html" })}
               {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
           </Section>
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
index 20c982b9a..ca62e4ba8 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx
@@ -34,6 +34,7 @@ import {
   minuteStepPropertyView,
   requiredPropertyView,
   SecondStepPropertyView,
+  showDataLoadingIndicatorsPropertyView,
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
@@ -272,6 +273,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           </>
         )}
@@ -480,6 +482,7 @@ let DateRangeTmpCmp = (function () {
                 {children.onEvent.getPropertyView()}
                 {disabledPropertyView(children)}
                 {hiddenPropertyView(children)}
+                {showDataLoadingIndicatorsPropertyView(children)}
               </Section>
             </>
           )}
diff --git a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
index 7a578f5a5..a515beeb3 100644
--- a/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx
@@ -37,6 +37,7 @@ import {
   minuteStepPropertyView,
   requiredPropertyView,
   SecondStepPropertyView,
+  showDataLoadingIndicatorsPropertyView,
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils";
@@ -240,6 +241,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
           {children.onEvent.getPropertyView()}
           {disabledPropertyView(children)}
           {hiddenPropertyView(children)}
+          {showDataLoadingIndicatorsPropertyView(children)}
         </Section></>
       )}
 
@@ -411,6 +413,7 @@ const TimeRangeTmpCmp = (function () {
             {children.onEvent.getPropertyView()}
             {disabledPropertyView(children)}
             {hiddenPropertyView(children)}
+            {showDataLoadingIndicatorsPropertyView(children)}
           </Section></>
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index d46f9ad0b..78857be7e 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -11,7 +11,7 @@ import { AnimationStyle, AnimationStyleType, FileStyle, FileStyleType, heightCal
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { hasIcon } from "comps/utils";
 import { getComponentDocUrl } from "comps/utils/compDocUtil";
-import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
+import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import _ from "lodash";
 import mime from "mime";
@@ -644,6 +644,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
             {children.onEvent.getPropertyView()}
             {disabledPropertyView(children)}
             {hiddenPropertyView(children)}
+            {showDataLoadingIndicatorsPropertyView(children)}
           </Section>
           <Section name={sectionNames.advanced}>
               {children.fileType.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index cba4c8aaf..159595231 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design";
 import { StringControl } from "../controls/codeControl";
 import { UICompBuilder, withDefault } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
@@ -112,6 +112,7 @@ let FileViewerBasicComp = (function () {
           {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
           <Section name={sectionNames.layout}>
diff --git a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
index 44ae164c6..7ef5440cc 100644
--- a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
@@ -52,7 +52,10 @@ const TmpComp = withTypeAndChildren<
         return lazyLoadComp(
           manifest.compName,
           manifest.compPath,
-        );
+          undefined,
+          undefined,
+          manifest.withoutLoading,
+        )
       }
       const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!);
       return withErrorBoundary(comp!) as ExposingMultiCompConstructor;
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
index 990f8531c..9abe6287f 100644
--- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -18,7 +18,7 @@ import {
   withExposingConfigs,
 } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { NumberControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
@@ -128,6 +128,7 @@ let IconBasicComp = (function () {
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
+            {showDataLoadingIndicatorsPropertyView(children)}
           </Section>
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
index 889444883..c401653d1 100644
--- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -6,7 +6,7 @@ import styled from "styled-components";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, IframeStyle, IframeStyleType } from "comps/controls/styleControlConstants";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import log from "loglevel";
 
@@ -81,6 +81,7 @@ let IFrameCompBase = new UICompBuilder(
           {children.allowMicrophone.propertyView({ label: trans("iframe.allowMicrophone") })}
           {children.allowCamera.propertyView({ label: trans("iframe.allowCamera") })}
           {children.allowPopup.propertyView({ label: trans("iframe.allowPopup") })}
+          {showDataLoadingIndicatorsPropertyView(children)}
         </Section>
       )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index 9e777fede..25d5e1d2b 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -24,7 +24,7 @@ import {
   heightCalculator,
   widthCalculator,
 } from "comps/controls/styleControlConstants";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { AutoHeightControl } from "comps/controls/autoHeightControl";
 import { BoolControl } from "comps/controls/boolControl";
@@ -190,6 +190,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
+            {showDataLoadingIndicatorsPropertyView(children)}
             {children.supportPreview.propertyView({
               label: trans("image.supportPreview"),
               tooltip: trans("image.supportPreviewTip"),
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
index 3cc215c0b..3828e9b01 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonEditorComp.tsx
@@ -5,7 +5,7 @@ import { defaultData } from "./jsonConstants";
 import styled from "styled-components";
 import { jsonValueExposingStateControl } from "comps/controls/codeStateControl";
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { LabelControl } from "comps/controls/labelControl";
 import { formDataChildren, FormDataPropertyView } from "../formComp/formDataConstants";
@@ -155,15 +155,15 @@ let JsonEditorTmpComp = (function () {
             <Section name={sectionNames.interaction}>
               {children.onEvent.getPropertyView()}
               {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
           <Section name={trans('prop.height')}>
             {children.autoHeight.propertyView({ label: trans('prop.height') })}
           </Section>
-          {!children.autoHeight.getView()&&<Section name={sectionNames.layout}>
-  {children.showVerticalScrollbar.propertyView({label: trans('prop.showVerticalScrollbar')})}
-  
-</Section>}
+            {!children.autoHeight.getView()&&<Section name={sectionNames.layout}>
+            {children.showVerticalScrollbar.propertyView({label: trans('prop.showVerticalScrollbar')})}
+          </Section>}
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && ( children.label.getPropertyView() )}
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
index 0a9e5f886..d1c6b917c 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonExplorerComp.tsx
@@ -7,7 +7,7 @@ import styled from "styled-components";
 import { BoolControl } from "comps/controls/boolControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { ArrayOrJSONObjectControl, NumberControl } from "comps/controls/codeControl";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
 import { useContext, useEffect } from "react";
@@ -90,6 +90,7 @@ let JsonExplorerTmpComp = (function () {
             <Section name={sectionNames.interaction}>
               {hiddenPropertyView(children)}
               {children.expandToggle.propertyView({ label: trans("jsonExplorer.expandToggle") })}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index 89686dbe5..c3f93b6e1 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -1,4 +1,4 @@
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import {
   ArrayOrJSONObjectControl,
   NumberControl,
@@ -157,6 +157,7 @@ let JsonLottieTmpComp = (function () {
                 {children.animationStart.propertyView({ label: trans("jsonLottie.animationStart")})}
                  {children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})}
                 {hiddenPropertyView(children)}
+                {showDataLoadingIndicatorsPropertyView(children)}
               </Section>
             </>
           )}
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index c1e58eda8..219f3d783 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -20,7 +20,7 @@ import { UICompBuilder, withDefault } from "../../generators";
 import DateWidget from "./dateWidget";
 import ErrorBoundary from "./errorBoundary";
 import { Theme } from "@rjsf/antd";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { AutoHeightControl } from "../../controls/autoHeightControl";
 import { useContext, useEffect, useRef, useState, createContext } from "react";
 import { EditorContext } from "comps/editorState";
@@ -418,6 +418,7 @@ let FormBasicComp = (function () {
               {children.resetAfterSubmit.propertyView({
                 label: trans("jsonSchemaForm.resetAfterSubmit"),
               })}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx
index 38952eb17..7a45714b3 100644
--- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx
@@ -1,5 +1,5 @@
 import { default as Skeleton } from "antd/es/skeleton";
-import { simpleMultiComp } from "comps/generators";
+import { simpleMultiComp, withIsLoading } from "comps/generators";
 import { withExposingConfigs } from "comps/generators/withExposing";
 import { GreyTextColor } from "constants/style";
 import log from "loglevel";
@@ -92,7 +92,8 @@ export function lazyLoadComp(
   compName?: string,
   compPath?: string,
   loader?: LazyloadCompLoader,
-  loadingElement?: () => React.ReactNode
+  loadingElement?: () => React.ReactNode,
+  withoutLoading?: boolean,
 ) {
   class LazyLoadComp extends simpleMultiComp({}) {
     compValue: any;
@@ -119,6 +120,8 @@ export function lazyLoadComp(
         return;
       }
 
+      LazyExportedComp = withoutLoading ? LazyExportedComp : withIsLoading(LazyExportedComp);
+
       const params: CompParams<any> = {
         dispatch: this.dispatch,
       };
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
index 15e10968a..6e9a4b865 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
@@ -4,7 +4,7 @@ import { ListViewImplComp } from "./listViewComp";
 import { ListCompType } from "./listViewUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
-import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
+import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 
 type Props = {
   comp: InstanceType<typeof ListViewImplComp>;
@@ -56,6 +56,7 @@ export function listPropertyView(compType: ListCompType) {
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <Section name={sectionNames.interaction}>
             {hiddenPropertyView(children)}
+            {showDataLoadingIndicatorsPropertyView(children)}
           </Section>
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
index 47373e51b..9b64c1bbc 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
@@ -11,7 +11,7 @@ import { TacoAudio } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { trans } from "i18n";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 import { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
@@ -97,6 +97,7 @@ let AudioBasicComp = (function () {
               {children.loop.propertyView({
                 label: trans("audio.loop"),
               })}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
           <Section name={sectionNames.style}>
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
index 6ddab9be4..b11e528a3 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/colorPickerComp.tsx
@@ -7,7 +7,7 @@ import styled, { css } from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
 import { FormDataPropertyView } from "../formComp/formDataConstants";
 import { textInputChildren } from "../textInputComp/textInputConstants";
-import { disabledPropertyView, hiddenPropertyView, } from "comps/utils/propertyUtils";
+import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView, } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { ColorPicker } from 'antd';
 import { presets } from "./colorPickerConstants";
@@ -108,6 +108,7 @@ export const ColorPickerComp = new UICompBuilder(childrenMap, (props) => {
         <Section name={sectionNames.interaction}>
           {children.onEvent.getPropertyView()}
           {disabledPropertyView(children)}
+          {showDataLoadingIndicatorsPropertyView(children)}
         </Section>
 
         <Section name={sectionNames.advanced}>
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index 2d0336704..a4f5fb751 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -15,7 +15,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { playIcon } from "lowcoder-design";
 import { RangeControl } from "../../controls/codeControl";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { Video } from "lowcoder-design";
 import type ReactPlayer from "react-player";
@@ -146,6 +146,7 @@ let VideoBasicComp = (function () {
             <><Section name={sectionNames.interaction}>
                 {children.onEvent.getPropertyView()}
                 {hiddenPropertyView(children)}
+                {showDataLoadingIndicatorsPropertyView(children)}
               </Section>
               <Section name={sectionNames.advanced}>
                 {children.poster.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx
index c825c5b0d..93039108b 100644
--- a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx
@@ -34,7 +34,7 @@ import { wrapWithPromiseHandling } from "util/promiseUtils";
 import ModuleInputComp from "./moduleInputComp";
 import { MethodConfigInfo, withMethodExposing } from "comps/generators/withMethodExposing";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { ModuleLoading } from "components/ModuleLoading";
 import { trans } from "i18n";
 import { ParamsConfig, ParamType } from "comps/controls/actionSelector/executeCompTypes";
@@ -119,9 +119,10 @@ class ModuleTmpComp extends ModuleCompBase {
     return (
       <>
         {inputPropertyView && <Section name={sectionNames.basic}>{inputPropertyView}</Section>}
-        {eventConfigs.length > 0 && (
-          <Section name={sectionNames.interaction}>{eventsPropertyView}</Section>
-        )}
+        <Section name={sectionNames.interaction}>
+          {eventConfigs.length > 0 && eventsPropertyView}
+          {showDataLoadingIndicatorsPropertyView(this.children)}
+        </Section>
         <Section name={sectionNames.layout}>
           {!this.autoScaleCompHeight() && this.children.autoHeight.getPropertyView()}
           {!this.autoScaleCompHeight() && this.children.scrollbars.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
index 75b483072..58d3ed016 100644
--- a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -17,7 +17,7 @@ import {
   AnimationStyleType,
   NavigationStyle,
 } from "comps/controls/styleControlConstants";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
 import { useContext } from "react";
@@ -241,6 +241,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
           <Section name={sectionNames.interaction}>
             {hiddenPropertyView(children)}
+            {showDataLoadingIndicatorsPropertyView(children)}
           </Section>
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
index efee00caa..8750d2e0c 100644
--- a/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx
@@ -9,7 +9,7 @@ import {  AnimationStyle, InputFieldStyle, LabelStyle, SliderStyle, SliderStyleT
 import styled, { css } from "styled-components";
 import { default as Slider } from "antd/es/slider";
 import { darkenColor, fadeColor } from "lowcoder-design";
-import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
+import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { IconControl } from "comps/controls/iconControl";
 import { trans } from "i18n";
 
@@ -102,6 +102,7 @@ export const SliderPropertyView = (
         {children.onEvent.getPropertyView()}
         {disabledPropertyView(children)}
         {hiddenPropertyView(children)}
+        {showDataLoadingIndicatorsPropertyView(children as any)}
       </Section>
     )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/progressComp.tsx b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
index 66f5c2123..1863c0150 100644
--- a/client/packages/lowcoder/src/comps/comps/progressComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/progressComp.tsx
@@ -7,7 +7,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
 import { useContext } from "react";
@@ -82,6 +82,7 @@ const ProgressBasicComp = (function () {
               {children.showInfo.propertyView({
                 label: trans("progress.showInfo"),
               })}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
index 4e915f1bc..42a80c8ee 100644
--- a/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/ratingComp.tsx
@@ -12,7 +12,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { styleControl } from "comps/controls/styleControl";
 import {  AnimationStyle, InputFieldStyle, LabelStyle, RatingStyle, RatingStyleType } from "comps/controls/styleControlConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
-import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
+import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 
 import { useContext, useEffect, useRef } from "react";
@@ -107,6 +107,7 @@ const RatingBasicComp = (function () {
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
               <Section name={sectionNames.advanced}>
                 {children.allowHalf.propertyView({
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
index 52829fd49..deb4eac70 100644
--- a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -17,6 +17,7 @@ import {
   hiddenPropertyView,
   placeholderPropertyView,
   readOnlyPropertyView,
+  showDataLoadingIndicatorsPropertyView,
 } from "comps/utils/propertyUtils";
 import _ from "lodash";
 import { trans } from "i18n";
@@ -327,6 +328,7 @@ const RichTextEditorCompBase = new UICompBuilder(childrenMap, (props) => {
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
             {readOnlyPropertyView(children)}
+            {showDataLoadingIndicatorsPropertyView(children)}
           </Section>
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
index af7959081..330c94120 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderContants.tsx
@@ -12,6 +12,7 @@ import {
   disabledPropertyView,
   hiddenPropertyView,
   placeholderPropertyView,
+  showDataLoadingIndicatorsPropertyView,
   showSearchPropertyView,
 } from "comps/utils/propertyUtils";
 import { i18nObjs, trans } from "i18n";
@@ -60,6 +61,7 @@ export const CascaderPropertyView = (
         {children.onEvent.getPropertyView()}
         {disabledPropertyView(children)}
         {hiddenPropertyView(children)}
+        {showDataLoadingIndicatorsPropertyView(children as any)}
       </Section>
     )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
index ca740c6db..2945fec1f 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx
@@ -16,7 +16,7 @@ import { formDataChildren, FormDataPropertyView } from "../formComp/formDataCons
 import { styleControl } from "comps/controls/styleControl";
 import {  AnimationStyle, InputFieldStyle, LabelStyle, RadioStyle } from "comps/controls/styleControlConstants";
 import { dropdownControl } from "../../controls/dropdownControl";
-import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 
@@ -72,6 +72,7 @@ export const RadioPropertyView = (
         {children.onEvent.getPropertyView()}
         {disabledPropertyView(children)}
         {hiddenPropertyView(children)}
+        {showDataLoadingIndicatorsPropertyView(children as any)}
       </Section></>
     )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
index 66314b858..fe030f20b 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -48,6 +48,7 @@ import {
   disabledPropertyView,
   hiddenPropertyView,
   placeholderPropertyView,
+  showDataLoadingIndicatorsPropertyView,
   showSearchPropertyView,
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -342,6 +343,7 @@ export const SelectPropertyView = (
           {children.onEvent.getPropertyView()}
           {disabledPropertyView(children)}
           {hiddenPropertyView(children)}
+          {showDataLoadingIndicatorsPropertyView(children as any)}
         </Section>
       </>
     )}
diff --git a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx
index 51a404dbd..fca9c6b8b 100644
--- a/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/shapeComp/shapeComp.tsx
@@ -18,6 +18,7 @@ import {
 import {
   disabledPropertyView,
   hiddenPropertyView,
+  showDataLoadingIndicatorsPropertyView,
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { BoolCodeControl } from "comps/controls/codeControl";
@@ -53,6 +54,7 @@ export const ContainerBaseComp = (function () {
             <Section name={sectionNames.interaction}>
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index 7d681bc4a..6ba13fe0e 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -15,7 +15,7 @@ import {
   SignatureContainerStyle
 } from "comps/controls/styleControlConstants";
 import { stateComp, withDefault } from "comps/generators/simpleGenerators";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { changeValueAction, multiChangeAction } from "lowcoder-core";
 import { Section, sectionNames, UndoIcon } from "lowcoder-design";
@@ -215,6 +215,7 @@ let SignatureTmpComp = (function () {
               {hiddenPropertyView(children)}
               {children.showUndo.propertyView({ label: trans("signature.showUndo") })}
               {children.showClear.propertyView({ label: trans("signature.showClear") })}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/switchComp.tsx b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
index 00c5abaef..730f521df 100644
--- a/client/packages/lowcoder/src/comps/comps/switchComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/switchComp.tsx
@@ -11,7 +11,7 @@ import styled, { css } from "styled-components";
 import { UICompBuilder } from "../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../generators/withExposing";
 import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
-import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { refMethods } from "comps/generators/withMethodExposing";
@@ -149,6 +149,7 @@ let SwitchTmpComp = (function () {
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
index a712fe7a8..789df9534 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -989,7 +989,7 @@ export function TableCompView(props: {
   const hideScrollbar = !showHorizontalScrollbar && !showVerticalScrollbar;
   const showTableLoading = loading ||
     // fixme isLoading type
-    ((showDataLoadingIndicators || compChildren.showDataLoadSpinner.getView()) &&
+    ((showDataLoadingIndicators) &&
       (compChildren.data as any).isLoading()) ||
     compChildren.loading.getView();
 
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
index fce61b34e..7f6e58fb1 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tablePropertyView.tsx
@@ -491,9 +491,6 @@ export function compTablePropertyView<T extends MultiBaseComp<TableChildrenType>
             {comp.children.onEvent.getPropertyView()}
             {hiddenPropertyView(comp.children)}
             {loadingPropertyView(comp.children)}
-            {comp.children.showDataLoadSpinner.propertyView({
-              label: trans("table.showDataLoadSpinner"),
-            })}
             {comp.children.selection.getPropertyView()}
             {comp.children.editModeClicks.propertyView({
               label: trans("table.editMode"),
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
index d32d3ff24..8278772c5 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -227,7 +227,6 @@ const tableChildrenMap = {
   showHorizontalScrollbar: BoolControl,
   data: withIsLoadingMethod(JSONObjectArrayControl),
   newData: stateComp<JSONArray>([]),
-  showDataLoadSpinner: withDefault(BoolPureControl, true),
   columns: ColumnListComp,
   size: dropdownControl(sizeOptions, "middle"),
   selection: SelectionControl,
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 38043d1a4..f51a1ede4 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -11,7 +11,7 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators
 import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
 
@@ -171,6 +171,7 @@ const TextPropertyView = React.memo((props: {
         <Section name={sectionNames.interaction}>
           {hiddenPropertyView(props.children)}
           {props.children.onEvent.getPropertyView()}
+          {showDataLoadingIndicatorsPropertyView(props.children)}
         </Section>
       )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
index 9c3129746..52c1b0010 100644
--- a/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx
@@ -30,6 +30,7 @@ import {
   placeholderPropertyView,
   regexPropertyView,
   requiredPropertyView,
+  showDataLoadingIndicatorsPropertyView,
 } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
@@ -221,6 +222,7 @@ export const TextInputInteractionSection = (children: TextInputComp) => (
   <Section name={sectionNames.interaction}>
     {children.onEvent.getPropertyView()}
     {disabledPropertyView(children)}
+    {showDataLoadingIndicatorsPropertyView(children as any)}
   </Section>
 );
 
diff --git a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
index 762ba516a..6e4f298dd 100644
--- a/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timelineComp/timelineComp.tsx
@@ -9,7 +9,7 @@ import {
 import { trans } from "i18n";
 import { UICompBuilder, withDefault } from "../../generators";
 import { ScrollBar, Section, sectionNames } from "lowcoder-design";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
@@ -194,6 +194,7 @@ let TimeLineBasicComp = (function () {
           <Section name={sectionNames.interaction}>
             {children.onEvent.getPropertyView()}
             {hiddenPropertyView(children)}
+            {showDataLoadingIndicatorsPropertyView(children)}
           </Section>
         )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
index 5db56ca3a..907566e12 100644
--- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx
@@ -4,7 +4,7 @@ import { AnimationStyle, AnimationStyleType, startButtonStyle, StartButtonStyleT
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { Button, Space } from "antd";
 import { countdownEvent, eventHandlerControl, pauseEvent, resetEvent, resumeEvent, startEvent } from "../controls/eventHandlerControl";
@@ -239,8 +239,9 @@ let AvatarGroupBasicComp = (function () {
               })}
             </Section>
             <Section name={sectionNames.interaction}>
-              {hiddenPropertyView(children)}
               {children.onEvent.propertyView()}
+              {hiddenPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           </>
         )}
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index 378a2f6fb..d389d8b8d 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -6,7 +6,7 @@ import { TransferStyle, TransferStyleType, heightCalculator, widthCalculator } f
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
-import { hiddenPropertyView } from "comps/utils/propertyUtils";
+import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { NumberControl, StringControl } from "comps/controls/codeControl";
 import { default as Transfer } from "antd/es/transfer";
@@ -170,9 +170,10 @@ let TransferBasicComp = (function () {
             label: trans("transfer.pageSize"),
           })}
         </Section>
-        <Section name={sectionNames.layout}>
+        <Section name={sectionNames.interaction}>
           {children.onEvent.propertyView()}
           {hiddenPropertyView(children)}
+          {showDataLoadingIndicatorsPropertyView(children)}
         </Section>
         <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
index cdfb952b6..cc7489237 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeComp.tsx
@@ -29,6 +29,7 @@ import { trans } from "i18n";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 import { AutoHeightControl } from "@lowcoder-ee/comps/controls/autoHeightControl";
+import { showDataLoadingIndicatorsPropertyView } from "@lowcoder-ee/comps/utils/propertyUtils";
 
 type TreeStyleType = StyleConfigType<typeof TreeStyle>;
 
@@ -151,6 +152,7 @@ let TreeBasicComp = (function () {
               {children.onEvent.getPropertyView()}
               {children.hidden.propertyView({ label: trans("prop.hide") })}
               {children.disabled.propertyView({ label: trans("prop.disabled") })}
+              {showDataLoadingIndicatorsPropertyView(children)}
               {children.selectType.propertyView({ label: trans("tree.selectType") })}
               {children.selectType.getView() !== "none" && valuePropertyView(children)}
               {children.selectType.getView() === "check" &&
diff --git a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
index c1a3f8157..115534568 100644
--- a/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/treeComp/treeSelectComp.tsx
@@ -30,6 +30,7 @@ import { trans } from "i18n";
 import {
   allowClearPropertyView,
   placeholderPropertyView,
+  showDataLoadingIndicatorsPropertyView,
   showSearchPropertyView,
 } from "comps/utils/propertyUtils";
 import { BaseSelectRef } from "rc-select";
@@ -170,6 +171,7 @@ let TreeBasicComp = (function () {
                 children.checkedStrategy.propertyView({ label: trans("tree.checkedStrategy") })}
               {allowClearPropertyView(children)}
               {showSearchPropertyView(children)}
+              {showDataLoadingIndicatorsPropertyView(children)}
             </Section>
           </>
         )}
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index e64b82cf3..9539a5bab 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -38,6 +38,7 @@ import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
 export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
   ChildrenCompMap & {
     hidden: InstanceType<typeof BoolCodeControl>;
+    showDataLoadingIndicators: InstanceType<typeof BoolControl>,
     className: InstanceType<typeof StringControl>;
     dataTestId: InstanceType<typeof StringControl>;
     preventStyleOverwriting: InstanceType<typeof BoolControl>;
@@ -78,7 +79,7 @@ export const ExtendedPropertyView = React.memo(<
   const editorState = useContext(EditorContext);
   const selectedComp = values(editorState?.selectedComps())[0];
   const compType = selectedComp?.children?.compType?.getView() as UICompType;
-  
+
   useEffect(() => {
     setCompName(uiCompRegistry[compType]?.compName || '');
   }, [compType]);
@@ -139,6 +140,7 @@ export function uiChildren<
   return {
     ...childrenMap,
     hidden: BoolCodeControl,
+    showDataLoadingIndicators: withDefault(BoolControl, false),
     className: StringControl,
     dataTestId: StringControl,
     preventStyleOverwriting: withDefault(BoolControl, false),
diff --git a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
index 26914c1df..f37f9dcd5 100644
--- a/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
+++ b/client/packages/lowcoder/src/comps/generators/withIsLoading.tsx
@@ -11,6 +11,11 @@ import {
 import styled from "styled-components";
 import { codeControl } from "comps/controls/codeControl";
 import { setFieldsNoTypeCheck } from "util/objectUtils";
+import Skeleton from "antd/es/skeleton";
+import { ReactNode, useContext, useMemo } from "react";
+import { CompContext } from "../utils/compContext";
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
+import { ThemeContext } from "../utils/themeContext";
 
 const Wrapper = styled.div`
   &,
@@ -23,6 +28,50 @@ const Wrapper = styled.div`
 
 const __WITH_IS_LOADING = "__WITH_IS_LOADING";
 
+const LoadingWrapper = ({
+  isLoading,
+  children,
+}: {
+  isLoading: boolean,
+  children: ReactNode,
+}) => {
+  const compState = useContext(CompContext);
+  const currentTheme = useContext(ThemeContext)?.theme;
+
+  const showLoading = useMemo(() => {
+    const themeDataIndicator = currentTheme?.showDataLoadingIndicators;
+    const compDataIndicator = compState.comp?.comp.showDataLoadingIndicators;
+
+    return isLoading ? (
+      compDataIndicator !== 'undefined' ? compDataIndicator : Boolean(themeDataIndicator)
+    ) : false;
+  }, [
+    isLoading,
+    currentTheme?.showDataLoadingIndicators,
+    compState.comp?.comp.showDataLoadingIndicators,
+  ]);
+
+  if (currentTheme?.dataLoadingIndicator === 'skeleton') {
+    return (
+      <Wrapper>
+        <Skeleton active loading={showLoading}>
+          {children}
+        </Skeleton>
+      </Wrapper>
+    );
+  }
+
+  return (
+    <Wrapper>
+      <Spin
+        spinning={showLoading}
+        indicator={<LoadingOutlined style={{ fontSize: 15 }} spin />}
+      >
+        {children}
+      </Spin>
+    </Wrapper>
+  )
+}
 /**
  * Unified increase isLoading effect
  */
@@ -38,16 +87,16 @@ export function withIsLoading<T extends MultiCompConstructor>(VariantComp: T): T
         },
         updateNodeFields: (value: any) => {
           const fetchInfo = value[__WITH_IS_LOADING] as FetchInfo;
-          return { isLoading: fetchInfo.isFetching };
+          return { isLoading: fetchInfo?.isFetching };
         },
       });
     }
 
     override getView() {
       return (
-        <Wrapper>
-          <Spin spinning={this.isLoading}>{super.getView()}</Spin>
-        </Wrapper>
+        <LoadingWrapper isLoading={this.isLoading}>
+          {super.getView()}
+        </LoadingWrapper>
       );
     }
   }
diff --git a/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx b/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx
index f8b34031c..e361a64cc 100644
--- a/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx
+++ b/client/packages/lowcoder/src/comps/utils/propertyUtils.tsx
@@ -16,6 +16,11 @@ export function isCompWithPropertyView<C extends Comp<any> = Comp<any>>(
   return "propertyView" in comp && typeof (comp as any)["propertyView"] === "function";
 }
 
+export const showDataLoadingIndicatorsPropertyView = (
+  children: {showDataLoadingIndicators: InstanceType<typeof BoolControl> }
+) =>
+  children.showDataLoadingIndicators.propertyView({ label: trans("themeDetail.showDataLoadingIndicators") });
+
 export const hiddenPropertyView = (children: { hidden: InstanceType<typeof BoolCodeControl> }) =>
   children.hidden.propertyView({ label: trans("prop.hide") });
 
diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts
index 144486380..052389f18 100644
--- a/client/packages/lowcoder/src/constants/themeConstants.ts
+++ b/client/packages/lowcoder/src/constants/themeConstants.ts
@@ -28,6 +28,7 @@ const theme = {
   animationIterationCount: "",
   showComponentLoadingIndicators: true,
   showDataLoadingIndicators: true,
+  dataLoadingIndicatpr: 'spinner',
   gridBgImageSize: "cover",
   gridBgImagePosition: "center",
   gridBgImageRepeat: "no-repeat",
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 3702a8503..5b7b2cb36 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2706,7 +2706,8 @@ export const en = {
     "gridColumnsDesc": "Default number of columns typically used for most containers",
     "loadingIndicators": "Loading Indicators",
     "showComponentLoadingIndicators": "Show loading indicators when component load",
-    "showDataLoadingIndicators": "Show loading indicators when data load",
+    "showDataLoadingIndicators": "Show indicators during data loading",
+    "dataLoadingIndicator": "Data loading indicator",
     "background": "Background Styles",
     "gridSettings": "Grid Settings",
     "gridRowHeight": "Grid Row Height",
diff --git a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
index a6e66f5e7..f2ba2dfee 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx
@@ -45,7 +45,6 @@ import { Card, Collapse, CollapseProps, Divider, Flex, List, Tooltip } from 'ant
 
 import { ThemeCompPanel } from "pages/setting/theme/ThemeCompPanel";
 import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
-import Switch from "antd/es/switch";
 
 const ThemeSettingsView = styled.div`
   font-size: 14px;
@@ -174,7 +173,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
     this.setState({
       theme: {
         ...this.state.theme,
-        [params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding  || params.borderWidth || params.borderStyle || params.fontFamily || params.showComponentLoadingIndicators || params.showDataLoadingIndicators || params.gridColumns || params.gridRowHeight || params.gridRowCount || params.gridPaddingX || params.gridPaddingY || params.gridBgImage || params.gridBgImageRepeat || params.gridBgImageSize || params.gridBgImagePosition || params.gridBgImageOrigin,
+        [params.themeSettingKey]: params.color || params.radius || params.chart || params.margin || params.padding  || params.borderWidth || params.borderStyle || params.fontFamily || params.showComponentLoadingIndicators || params.showDataLoadingIndicators || params.dataLoadingIndicator || params.gridColumns || params.gridRowHeight || params.gridRowCount || params.gridPaddingX || params.gridPaddingY || params.gridBgImage || params.gridBgImageRepeat || params.gridBgImageSize || params.gridBgImagePosition || params.gridBgImageOrigin,
       },
     });
   }
@@ -315,6 +314,13 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
             type: "showDataLoadingIndicators",
             value: this.state.theme?.showDataLoadingIndicators,
           },
+          {
+            settingsKey: 'dataLoadingIndicator',
+            name: trans('themeDetail.dataLoadingIndicator'),
+            desc: '',
+            type: "dataLoadingIndicator",
+            value: this.state.theme?.dataLoadingIndicator,
+          },
         ]
       },
     ];
@@ -782,6 +788,17 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
                                   }}
                                 />
                               }
+                              {layoutSettingsItem.type == "dataLoadingIndicator" && 
+                                <ThemeSettingsSelector
+                                  themeSettingKey={layoutSettingsItem.settingsKey}
+                                  name={layoutSettingsItem.name}
+                                  dataLoadingIndicator={layoutSettingsItem.value as string}
+                                  configChange={(params) => {
+                                    this.configChange(params);
+                                  }}
+                                  showVarName={false}
+                                />
+                              }
                           </List.Item>
                           </Tooltip>
                         ))}
diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
index e0fbab429..b0a15315a 100644
--- a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
+++ b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx
@@ -34,6 +34,7 @@ export const themeTemplateList = [
       padding: "3px",
       showComponentLoadingIndicators: true,
       showDataLoadingIndicators: true,
+      dataLoadingIndicator: 'spinner',
     },
   },
   {
@@ -53,6 +54,7 @@ export const themeTemplateList = [
       padding: "3px",
       showComponentLoadingIndicators: true,
       showDataLoadingIndicators: true,
+      dataLoadingIndicator: 'spinner',
     },
   },
   {
@@ -72,6 +74,7 @@ export const themeTemplateList = [
       padding: "3px",
       showComponentLoadingIndicators: true,
       showDataLoadingIndicators: true,
+      dataLoadingIndicator: 'spinner',
     },
   },
 ];

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1434.diff" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1434.diff" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1434.diff" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1434.diff" target="_blank">pFad v4 Proxy</a></p></body>
</html>