Merge pull request #1434 from lowcoder-org/feat/loading-indicators

Feature - Data Loading Indicators

Author: FalkWolsky

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) {

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>
   );
 }

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"}>

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)}

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") })}

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") })}

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") })}

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>
           </>
         )}

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>
             </>
           )}

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()}