Skip to content

Commit 84393c8

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1434 from lowcoder-org/feat/loading-indicators
Feature - Data Loading Indicators
2 parents 7553286 + 54380cb commit 84393c8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+221
-58
lines changed

‎client/packages/lowcoder/src/api/commonSettingApi.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ export interface ThemeDetail {
7979
components?: Record<string, JSONObject>;
8080
showComponentLoadingIndicators?: boolean;
8181
showDataLoadingIndicators?: boolean;
82+
dataLoadingIndicator?: string;
8283
}
8384

8485
export function getThemeDetailName(key: keyof ThemeDetail) {

‎client/packages/lowcoder/src/components/ModuleLoading.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import LoadingOutlined from "@ant-design/icons/LoadingOutlined";
12
import { default as Spin } from "antd/es/spin";
23
import { GreyTextColor } from "constants/style";
34
import styled from "styled-components";
@@ -14,7 +15,7 @@ export const LoadingPlaceholder = styled.div`
1415
export function ModuleLoading() {
1516
return (
1617
<LoadingPlaceholder>
17-
<Spin />
18+
<Spin indicator={<LoadingOutlined style={{ fontSize: 15 }} spin />} />
1819
</LoadingPlaceholder>
1920
);
2021
}

‎client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ConfigItem, Radius, Margin, Padding, GridColumns, BorderWidth, BorderSt
44
import { isValidColor, isValidGradient, toHex } from "components/colorSelect/colorUtils";
55
import { ColorSelect } from "components/colorSelect";
66
import { TacoInput } from "components/tacoInput";
7-
import { Slider, Switch } from "antd";
7+
import { Segmented, Slider, Switch } from "antd";
88
import {
99
ExpandIcon,
1010
CompressIcon,
@@ -28,6 +28,7 @@ export type configChangeParams = {
2828
components?: Record<string, object>,
2929
showComponentLoadingIndicators?: boolean;
3030
showDataLoadingIndicators?: boolean;
31+
dataLoadingIndicator?: string;
3132
gridColumns?: string;
3233
gridRowHeight?: string;
3334
gridRowCount?: number;
@@ -58,6 +59,7 @@ type ColorConfigProps = {
5859
padding?: string;
5960
showComponentLoadingIndicators?: boolean;
6061
showDataLoadingIndicators?: boolean;
62+
dataLoadingIndicator?: string;
6163
gridColumns?: string;
6264
gridRowHeight?: string;
6365
gridRowCount?: number;
@@ -87,6 +89,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
8789
fontFamily: defaultFontFamily,
8890
showComponentLoadingIndicators: defaultShowComponentLoaders,
8991
showDataLoadingIndicators: defaultShowDataLoaders,
92+
dataLoadingIndicator: defaultDataLoadingIndicator,
9093
gridColumns: defaultGridColumns,
9194
gridRowHeight: defaultGridRowHeight,
9295
gridRowCount: defaultGridRowCount,
@@ -110,6 +113,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
110113
const [fontFamily, setFontFamily] = useState(defaultFontFamily);
111114
const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders);
112115
const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders);
116+
const [dataLoadingIndicator, setDataLoadingIndicator] = useState(defaultDataLoadingIndicator);
113117
const [gridColumns, setGridColumns] = useState(defaultGridColumns);
114118
const [gridRowHeight, setGridRowHeight] = useState(defaultGridRowHeight);
115119
const [gridRowCount, setGridRowCount] = useState(defaultGridRowCount);
@@ -346,6 +350,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
346350
setDataLoaders(defaultShowDataLoaders);
347351
}, [defaultShowDataLoaders]);
348352

353+
useEffect(() => {
354+
setDataLoadingIndicator(defaultDataLoadingIndicator);
355+
}, [defaultDataLoadingIndicator]);
356+
349357
useEffect(() => {
350358
setGridPaddingX(defaultGridPaddingX);
351359
}, [defaultGridPaddingX]);
@@ -375,6 +383,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
375383
themeSettingKey !== "fontFamily" &&
376384
themeSettingKey !== "showComponentLoadingIndicators" &&
377385
themeSettingKey !== "showDataLoadingIndicators" &&
386+
themeSettingKey !== "dataLoadingIndicator" &&
378387
themeSettingKey !== "gridColumns" &&
379388
themeSettingKey !== "gridRowHeight" &&
380389
themeSettingKey !== "gridRowCount" &&
@@ -551,6 +560,25 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
551560
</div>
552561
)}
553562

563+
{themeSettingKey === "dataLoadingIndicator" && (
564+
<div style={{
565+
marginTop: '6px',
566+
}}>
567+
<Segmented
568+
block
569+
value={dataLoadingIndicator}
570+
options={[
571+
{ value: 'spinner', label: 'Spinner' },
572+
{ value: 'skeleton', label: 'Skeleton' },
573+
]}
574+
onChange={(value) => {
575+
setDataLoadingIndicator(value)
576+
configChange({ themeSettingKey, dataLoadingIndicator: value});
577+
}}
578+
/>
579+
</div>
580+
)}
581+
554582
{themeSettingKey === "gridColumns" && (
555583
<div className="config-input">
556584
<GridColumns $gridColumns={defaultGridColumns || "24"}>

‎client/packages/lowcoder/src/comps/comps/avatar.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
withExposingConfigs,
1919
} from "comps/generators/withExposing";
2020
import { Section, sectionNames } from "lowcoder-design";
21-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
21+
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
2222
import { trans } from "i18n";
2323
import { NumberControl } from "comps/controls/codeControl";
2424
import { IconControl } from "comps/controls/iconControl";
@@ -253,6 +253,7 @@ let AvatarBasicComp = (function () {
253253
{<BadgeBasicSection {...children} />}
254254
<Section name={sectionNames.interaction}>
255255
{children.onEvent.getPropertyView()}
256+
{showDataLoadingIndicatorsPropertyView(children)}
256257
</Section>
257258
<Section name={sectionNames.layout}>
258259
{hiddenPropertyView(children)}

‎client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
hiddenPropertyView,
1515
disabledPropertyView,
1616
loadingPropertyView,
17+
showDataLoadingIndicatorsPropertyView,
1718
} from "comps/utils/propertyUtils";
1819
import { trans } from "i18n";
1920
import { IconControl } from "comps/controls/iconControl";
@@ -129,6 +130,7 @@ const LinkTmpComp = (function () {
129130
{disabledPropertyView(children)}
130131
{hiddenPropertyView(children)}
131132
{loadingPropertyView(children)}
133+
{showDataLoadingIndicatorsPropertyView(children)}
132134
</Section>
133135
<Section name={sectionNames.advanced}>
134136
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}

‎client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { UICompBuilder } from "comps/generators/uiCompBuilder";
1616
import { CustomModal, Section, sectionNames } from "lowcoder-design";
1717
import styled from "styled-components";
1818
import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
19-
import { hiddenPropertyView, disabledPropertyView } from "comps/utils/propertyUtils";
19+
import { hiddenPropertyView, disabledPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
2020
import { trans } from "i18n";
2121
import React, { Suspense, useEffect, useRef, useState, useContext } from "react";
2222
import { arrayStringExposingStateControl } from "comps/controls/codeStateControl";
@@ -223,6 +223,7 @@ const ScannerTmpComp = (function () {
223223
{children.onEvent.getPropertyView()}
224224
{disabledPropertyView(children)}
225225
{hiddenPropertyView(children)}
226+
{showDataLoadingIndicatorsPropertyView(children)}
226227
</Section>
227228
<Section name={sectionNames.advanced}>
228229
{children.continuous.propertyView({ label: trans("scanner.continuous") })}

‎client/packages/lowcoder/src/comps/comps/buttonComp/toggleButtonComp.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
disabledPropertyView,
66
hiddenPropertyView,
77
loadingPropertyView,
8+
showDataLoadingIndicatorsPropertyView,
89
} from "comps/utils/propertyUtils";
910
import { Section, sectionNames } from "lowcoder-design";
1011
import { trans } from "i18n";
@@ -109,6 +110,7 @@ const ToggleTmpComp = (function () {
109110
{disabledPropertyView(children)}
110111
{hiddenPropertyView(children)}
111112
{loadingPropertyView(children)}
113+
{showDataLoadingIndicatorsPropertyView(children)}
112114
</Section>
113115
<Section name={sectionNames.advanced}>
114116
{children.showText.propertyView({ label: trans("toggleButton.showText") })}

‎client/packages/lowcoder/src/comps/comps/commentComp/commentComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { UICompBuilder, withDefault } from "../../generators";
1212
// Right-side attribute subframe
1313
import { Section, sectionNames } from "lowcoder-design";
1414
// Switch indicating whether the component is hidden or not
15-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
15+
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
1616
// Right property switch
1717
import { BoolControl } from "comps/controls/boolControl";
1818
import { styleControl } from "comps/controls/styleControl"; //样式输入框
@@ -406,6 +406,7 @@ let CommentBasicComp = (function () {
406406
{children.deleteAble.propertyView({
407407
label: trans("comment.deleteAble"),
408408
})}
409+
{showDataLoadingIndicatorsPropertyView(children)}
409410
</Section>
410411
</>
411412
)}

‎client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { TriContainer } from "../triContainerComp/triContainer";
55
import {
66
ContainerCompBuilder,
77
} from "../triContainerComp/triContainerCompBuilder";
8-
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
8+
import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
99
import { trans } from "i18n";
1010
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
1111
import { BoolControl } from "comps/controls/boolControl";
@@ -318,8 +318,9 @@ export const ContainerBaseComp = (function () {
318318

319319
</Section>
320320
<Section name={sectionNames.interaction}>
321-
{hiddenPropertyView(children)}
322321
{children.onEvent.getPropertyView()}
322+
{hiddenPropertyView(children)}
323+
{showDataLoadingIndicatorsPropertyView(children)}
323324
</Section>
324325
</>
325326
)}

‎client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { useEffect, useRef, useContext } from "react";
99
import styled from "styled-components";
1010
import { getPromiseAfterDispatch } from "util/promiseUtils";
1111
import { EventData, EventTypeEnum } from "./types";
12-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
12+
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
1313
import { trans } from "i18n";
1414
import { EditorContext } from "comps/editorState";
1515
import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType } from "@lowcoder-ee/comps/controls/styleControlConstants";
@@ -244,6 +244,7 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
244244
{children.model.propertyView({ label: trans("customComp.data") })}
245245
{children.code.propertyView({ label: trans("customComp.code"), language: "html" })}
246246
{hiddenPropertyView(children)}
247+
{showDataLoadingIndicatorsPropertyView(children)}
247248
</Section>
248249
<Section name={sectionNames.style}>
249250
{children.style.getPropertyView()}

‎client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
minuteStepPropertyView,
3535
requiredPropertyView,
3636
SecondStepPropertyView,
37+
showDataLoadingIndicatorsPropertyView,
3738
} from "comps/utils/propertyUtils";
3839
import { trans } from "i18n";
3940
import { DATE_FORMAT, DATE_TIME_FORMAT, DateParser, PickerMode } from "util/dateTimeUtils";
@@ -272,6 +273,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
272273
{children.onEvent.getPropertyView()}
273274
{disabledPropertyView(children)}
274275
{hiddenPropertyView(children)}
276+
{showDataLoadingIndicatorsPropertyView(children)}
275277
</Section>
276278
</>
277279
)}
@@ -480,6 +482,7 @@ let DateRangeTmpCmp = (function () {
480482
{children.onEvent.getPropertyView()}
481483
{disabledPropertyView(children)}
482484
{hiddenPropertyView(children)}
485+
{showDataLoadingIndicatorsPropertyView(children)}
483486
</Section>
484487
</>
485488
)}

‎client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {
3737
minuteStepPropertyView,
3838
requiredPropertyView,
3939
SecondStepPropertyView,
40+
showDataLoadingIndicatorsPropertyView,
4041
} from "comps/utils/propertyUtils";
4142
import { trans } from "i18n";
4243
import { TIME_FORMAT, TimeParser } from "util/dateTimeUtils";
@@ -240,6 +241,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
240241
{children.onEvent.getPropertyView()}
241242
{disabledPropertyView(children)}
242243
{hiddenPropertyView(children)}
244+
{showDataLoadingIndicatorsPropertyView(children)}
243245
</Section></>
244246
)}
245247

@@ -411,6 +413,7 @@ const TimeRangeTmpCmp = (function () {
411413
{children.onEvent.getPropertyView()}
412414
{disabledPropertyView(children)}
413415
{hiddenPropertyView(children)}
416+
{showDataLoadingIndicatorsPropertyView(children)}
414417
</Section></>
415418
)}
416419

‎client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { AnimationStyle, AnimationStyleType, FileStyle, FileStyleType, heightCal
1111
import { withMethodExposing } from "comps/generators/withMethodExposing";
1212
import { hasIcon } from "comps/utils";
1313
import { getComponentDocUrl } from "comps/utils/compDocUtil";
14-
import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
14+
import { disabledPropertyView, hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
1515
import { trans } from "i18n";
1616
import _ from "lodash";
1717
import mime from "mime";
@@ -644,6 +644,7 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => {
644644
{children.onEvent.getPropertyView()}
645645
{disabledPropertyView(children)}
646646
{hiddenPropertyView(children)}
647+
{showDataLoadingIndicatorsPropertyView(children)}
647648
</Section>
648649
<Section name={sectionNames.advanced}>
649650
{children.fileType.propertyView({

‎client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Section, sectionNames } from "lowcoder-design";
88
import { StringControl } from "../controls/codeControl";
99
import { UICompBuilder, withDefault } from "../generators";
1010
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
11-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
11+
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
1212
import { trans } from "i18n";
1313
import { useContext } from "react";
1414
import { EditorContext } from "comps/editorState";
@@ -112,6 +112,7 @@ let FileViewerBasicComp = (function () {
112112
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
113113
<Section name={sectionNames.interaction}>
114114
{hiddenPropertyView(children)}
115+
{showDataLoadingIndicatorsPropertyView(children)}
115116
</Section>
116117
)}
117118
<Section name={sectionNames.layout}>

‎client/packages/lowcoder/src/comps/comps/gridItemComp.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,10 @@ const TmpComp = withTypeAndChildren<
5252
return lazyLoadComp(
5353
manifest.compName,
5454
manifest.compPath,
55-
);
55+
undefined,
56+
undefined,
57+
manifest.withoutLoading,
58+
)
5659
}
5760
const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!);
5861
return withErrorBoundary(comp!) as ExposingMultiCompConstructor;

‎client/packages/lowcoder/src/comps/comps/iconComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {
1818
withExposingConfigs,
1919
} from "comps/generators/withExposing";
2020
import { Section, sectionNames } from "lowcoder-design";
21-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
21+
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
2222
import { trans } from "i18n";
2323
import { NumberControl } from "comps/controls/codeControl";
2424
import { IconControl } from "comps/controls/iconControl";
@@ -128,6 +128,7 @@ let IconBasicComp = (function () {
128128
<Section name={sectionNames.interaction}>
129129
{children.onEvent.getPropertyView()}
130130
{hiddenPropertyView(children)}
131+
{showDataLoadingIndicatorsPropertyView(children)}
131132
</Section>
132133
)}
133134

‎client/packages/lowcoder/src/comps/comps/iframeComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import styled from "styled-components";
66
import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
77
import { styleControl } from "comps/controls/styleControl";
88
import { AnimationStyle, AnimationStyleType, IframeStyle, IframeStyleType } from "comps/controls/styleControlConstants";
9-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
9+
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
1010
import { trans } from "i18n";
1111
import log from "loglevel";
1212

@@ -81,6 +81,7 @@ let IFrameCompBase = new UICompBuilder(
8181
{children.allowMicrophone.propertyView({ label: trans("iframe.allowMicrophone") })}
8282
{children.allowCamera.propertyView({ label: trans("iframe.allowCamera") })}
8383
{children.allowPopup.propertyView({ label: trans("iframe.allowPopup") })}
84+
{showDataLoadingIndicatorsPropertyView(children)}
8485
</Section>
8586
)}
8687

‎client/packages/lowcoder/src/comps/comps/imageComp.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
heightCalculator,
2525
widthCalculator,
2626
} from "comps/controls/styleControlConstants";
27-
import { hiddenPropertyView } from "comps/utils/propertyUtils";
27+
import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
2828
import { trans } from "i18n";
2929
import { AutoHeightControl } from "comps/controls/autoHeightControl";
3030
import { BoolControl } from "comps/controls/boolControl";
@@ -190,6 +190,7 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
190190
<Section name={sectionNames.interaction}>
191191
{children.onEvent.getPropertyView()}
192192
{hiddenPropertyView(children)}
193+
{showDataLoadingIndicatorsPropertyView(children)}
193194
{children.supportPreview.propertyView({
194195
label: trans("image.supportPreview"),
195196
tooltip: trans("image.supportPreviewTip"),

0 commit comments

Comments
 (0)