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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

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.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy