lowcoder-org · FalkWolsky · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"),