From aeca8c56789049498ba61e2c5cf06c77440dbe1b Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 00:01:57 +0500 Subject: [PATCH 01/11] updated initial loader --- client/packages/lowcoder/index.html | 28 ++-------------------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html index 670113fcf..f84a4bf99 100644 --- a/client/packages/lowcoder/index.html +++ b/client/packages/lowcoder/index.html @@ -57,32 +57,8 @@
- - - - - - - - - - - - +
From 5eb2f720edb944d362c0f6f616f391034bc83d02 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 00:02:22 +0500 Subject: [PATCH 02/11] updated editor view loader --- .../packages/lowcoder/src/pages/editor/editorSkeletonView.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx index a38afd104..98ff83f92 100644 --- a/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx +++ b/client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx @@ -16,6 +16,7 @@ import { default as Skeleton } from "antd/es/skeleton"; import { default as Spin } from "antd/es/spin"; import { useTemplateViewMode, useUserViewMode } from "util/hooks"; import { ProductLoading } from "components/ProductLoading"; +import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined"; const StyledSkeleton = styled(Skeleton)` padding: 16px; @@ -40,7 +41,7 @@ export const EditorLoadingSpin = (props: { height?: string | number }) => { const { height = "100vh" } = props; return (
- + }/>
); }; From 67fd51408008d4b6d8fec777be51b3c9397d7580 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 00:02:56 +0500 Subject: [PATCH 03/11] replace loaders with skeleton loaders when comps load --- .../lowcoder-design/src/components/Loading.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/Loading.tsx b/client/packages/lowcoder-design/src/components/Loading.tsx index 21718bd07..574177146 100644 --- a/client/packages/lowcoder-design/src/components/Loading.tsx +++ b/client/packages/lowcoder-design/src/components/Loading.tsx @@ -1,5 +1,6 @@ import styled, { css } from "styled-components"; import { CSSProperties } from "react"; +import { default as Skeleton } from "antd/es/skeleton"; type LoadingContainerProps = { $backgroundColor: string; @@ -12,6 +13,8 @@ const LoadingWrapper = styled.div` flex-direction: column; align-items: center; justify-content: center; + width: 100%; + height: 100%; `; // Loading @@ -61,6 +64,10 @@ const Load2 = styled.div` linear-gradient(to right, ${(props) => props.$color}a3, ${(props) => props.$color}1a); `; +const StyledSkeleton = styled(Skeleton.Button)` + height: 100%; +`; + type LoadingProps = { backgroundColor?: string; color?: string; @@ -77,14 +84,15 @@ export const Loading = (props: LoadingProps) => { }; return ( - + {/* - + */} + ); }; From 4ebfd9b61588550067427366b0f63cdc5a679a05 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 00:03:14 +0500 Subject: [PATCH 04/11] updated button loaders --- .../packages/lowcoder-design/src/components/button.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/client/packages/lowcoder-design/src/components/button.tsx b/client/packages/lowcoder-design/src/components/button.tsx index 3cb3be148..d113e6dce 100644 --- a/client/packages/lowcoder-design/src/components/button.tsx +++ b/client/packages/lowcoder-design/src/components/button.tsx @@ -1,4 +1,6 @@ import Button, { ButtonProps } from "antd/es/button"; +import Spin from "antd/es/spin"; +import LoadingOutlined from "@ant-design/icons/LoadingOutlined" import styled, { css } from "styled-components"; import { Loading } from "./Loading"; import * as React from "react"; @@ -206,10 +208,15 @@ const TacoButton = forwardRef( {props.icon} {props.children} - */} + } + style={loadingStyle} /> ) : ( From 10d652541fce35d619fc9104a3230f05cb3c89c8 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 00:03:24 +0500 Subject: [PATCH 05/11] updated table loader --- .../comps/comps/tableComp/tableCompView.tsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index 9861d5a23..e2638b61d 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -45,6 +45,7 @@ import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil"; import { TableSummary } from "./tableSummaryComp"; +import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined"; export const EMPTY_ROW_KEY = 'empty_row'; @@ -1017,13 +1018,17 @@ export function TableCompView(props: { size={compChildren.size.getView()} rowAutoHeight={rowAutoHeight} tableLayout="fixed" - loading={ - loading || - // fixme isLoading type - (compChildren.showDataLoadSpinner.getView() && - (compChildren.data as any).isLoading()) || - compChildren.loading.getView() - } + loading={{ + spinning: ( + loading || + // fixme isLoading type + (compChildren.showDataLoadSpinner.getView() && + (compChildren.data as any).isLoading()) || + compChildren.loading.getView() + ), + indicator: , + size: 'large' + }} onCellClick={(columnName: string, dataIndex: string) => { comp.children.selectedCell.dispatchChangeValueAction({ name: columnName, From adcc93f3b013227b6ff6e6470a578dfb5cc40405 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 22:20:55 +0500 Subject: [PATCH 06/11] updated loading skeleton --- client/packages/lowcoder-design/src/components/Loading.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/Loading.tsx b/client/packages/lowcoder-design/src/components/Loading.tsx index 574177146..414096e33 100644 --- a/client/packages/lowcoder-design/src/components/Loading.tsx +++ b/client/packages/lowcoder-design/src/components/Loading.tsx @@ -64,7 +64,7 @@ const Load2 = styled.div` linear-gradient(to right, ${(props) => props.$color}a3, ${(props) => props.$color}1a); `; -const StyledSkeleton = styled(Skeleton.Button)` +const StyledSkeleton = styled(Skeleton)` height: 100%; `; @@ -92,7 +92,7 @@ export const Loading = (props: LoadingProps) => { */} - + ); }; From b668155c1a7a3bf5457a20cfec250e87f7c1b746 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 22:21:23 +0500 Subject: [PATCH 07/11] added loading indicator options for comp/data --- .../src/comps/comps/appSettingsComp.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx index 667c2b9ae..a0a30b8b2 100644 --- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx @@ -111,10 +111,6 @@ const DivStyled = styled.div` > div:first-child { margin-bottom: 6px; } - - .tooltipLabel { - white-space: nowrap; - } } // custom styles for icon selector @@ -189,6 +185,8 @@ const childrenMap = { maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"), themeId: valueComp(DEFAULT_THEMEID), preventAppStylesOverwriting: withDefault(BoolControl, true), + showComponentLoadingIndicators: withDefault(BoolControl, true), + showDataLoadingIndicators: withDefault(BoolControl, true), customShortcuts: CustomShortcutsComp, disableCollision: valueComp(false), lowcoderCompVersion: withDefault(StringControl, 'latest'), @@ -211,6 +209,8 @@ function AppSettingsModal(props: ChildrenInstance) { category, showHeaderInPublic, preventAppStylesOverwriting, + showComponentLoadingIndicators, + showDataLoadingIndicators, lowcoderCompVersion, } = props; @@ -325,6 +325,16 @@ function AppSettingsModal(props: ChildrenInstance) { label: trans("prop.preventOverwriting"), })} +
+ {showComponentLoadingIndicators.propertyView({ + label: trans("prop.showComponentLoadingIndicators"), + })} +
+
+ {showDataLoadingIndicators.propertyView({ + label: trans("prop.showDataLoadingIndicators"), + })} +
From 4dbe9d44d1fac67f0a33bdba83a01d41984a22a4 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 22:21:57 +0500 Subject: [PATCH 08/11] hide loading indicator for comps based on app setting --- .../src/comps/comps/lazyLoadComp/lazyLoadComp.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx index fbb8ccc06..1ae6f3ba0 100644 --- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx @@ -5,11 +5,12 @@ import { GreyTextColor } from "constants/style"; import log from "loglevel"; import { Comp, CompAction, CompConstructor, CompParams, customAction, isCustomAction } from "lowcoder-core"; import { WhiteLoading } from "lowcoder-design"; -import { useState } from "react"; +import { useContext, useState } from "react"; import { useMount } from "react-use"; import styled from "styled-components"; import { RemoteCompInfo, RemoteCompLoader } from "types/remoteComp"; import { withErrorBoundary } from "comps/generators/withErrorBoundary"; +import { EditorContext } from "@lowcoder-ee/comps/editorState"; const ViewError = styled.div` display: flex; @@ -52,6 +53,8 @@ interface LazyCompViewProps { function LazyCompView(props: React.PropsWithChildren) { const { loadComp, loadingElement, errorElement } = props; const [error, setError] = useState(""); + const editorState = useContext(EditorContext); + const showComponentLoadingIndicators = editorState?.getAppSettings().showComponentLoadingIndicators; useMount(() => { setError(""); @@ -71,14 +74,14 @@ function LazyCompView(props: React.PropsWithChildren) { ); } + if (!showComponentLoadingIndicators) return<>; + if (loadingElement) { return {loadingElement()}; } return ( - - - + ); } From dd5edc2e0a15719aee4e7a89812cbd789d45aa55 Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Fri, 6 Sep 2024 22:22:38 +0500 Subject: [PATCH 09/11] added loading skeleton for table --- .../comps/comps/tableComp/tableCompView.tsx | 55 ++++++++++++++----- .../packages/lowcoder/src/i18n/locales/de.ts | 2 +- .../packages/lowcoder/src/i18n/locales/en.ts | 4 +- .../packages/lowcoder/src/i18n/locales/pt.ts | 2 +- .../packages/lowcoder/src/i18n/locales/zh.ts | 2 +- 5 files changed, 48 insertions(+), 17 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index e2638b61d..f73619e8a 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -46,6 +46,8 @@ import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil"; import { TableSummary } from "./tableSummaryComp"; import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined"; +import Skeleton from "antd/es/skeleton"; +import { SkeletonButtonProps } from "antd/es/skeleton/Button"; export const EMPTY_ROW_KEY = 'empty_row'; @@ -439,6 +441,27 @@ const TableTd = styled.td<{ } `; +const TableTdLoading = styled(Skeleton.Button)` + width: 90% !important; + display: table !important; + + .ant-skeleton-button { + min-width: auto !important; + display: block !important; + ${(props) => props.$tableSize === 'small' && ` + height: 20px !important; + `} + ${(props) => props.$tableSize === 'middle' && ` + height: 24px !important; + `} + ${(props) => props.$tableSize === 'large' && ` + height: 28px !important; + `} + } +`; + const ResizeableTitle = (props: any) => { const { onResize, onResizeStop, width, viewModeResizable, ...restProps } = props; const [widthChild, setWidthChild] = useState(0); @@ -504,6 +527,7 @@ type CustomTableProps = Omit, "components" | columnsStyle: TableColumnStyleType; size?: string; rowAutoHeight?: boolean; + customLoading?: boolean; onCellClick: (columnName: string, dataIndex: string) => void; }; @@ -520,6 +544,7 @@ function TableCellView(props: { linkStyle: TableColumnLinkStyleType; tableSize?: string; autoHeight?: boolean; + loading?: boolean; }) { const { record, @@ -534,6 +559,7 @@ function TableCellView(props: { linkStyle, tableSize, autoHeight, + loading, ...restProps } = props; @@ -591,7 +617,10 @@ function TableCellView(props: { $tableSize={tableSize} $autoHeight={autoHeight} > - {children} + {loading + ? + : children + } ); } @@ -629,6 +658,8 @@ function ResizeableTable(props: CustomTableProps { const { width, style, linkStyle, cellColorFn, ...restCol } = col; const resizeWidth = (resizeData.index === index ? resizeData.width : col.width) ?? 0; @@ -662,7 +693,8 @@ function ResizeableTable(props: CustomTableProps { props.onCellClick(col.titleText, String(col.dataIndex)); - } + }, + loading: customLoading, }), onHeaderCell: () => ({ width: resizeWidth, @@ -733,6 +765,7 @@ export function TableCompView(props: { }) { const [emptyRowsMap, setEmptyRowsMap] = useState>({}); const editorState = useContext(EditorContext); + const showDataLoadingIndicators = editorState?.getAppSettings().showDataLoadingIndicators; const { width, ref } = useResizeDetector({ refreshMode: "debounce", refreshRate: 600, @@ -957,6 +990,12 @@ export function TableCompView(props: { } const hideScrollbar = !showHorizontalScrollbar && !showVerticalScrollbar; + const showTableLoading = loading || + // fixme isLoading type + ((showDataLoadingIndicators || compChildren.showDataLoadSpinner.getView()) && + (compChildren.data as any).isLoading()) || + compChildren.loading.getView(); + return ( , - size: 'large' - }} + customLoading={showTableLoading} onCellClick={(columnName: string, dataIndex: string) => { comp.children.selectedCell.dispatchChangeValueAction({ name: columnName, diff --git a/client/packages/lowcoder/src/i18n/locales/de.ts b/client/packages/lowcoder/src/i18n/locales/de.ts index cdaa0c80d..4d2bd1b94 100644 --- a/client/packages/lowcoder/src/i18n/locales/de.ts +++ b/client/packages/lowcoder/src/i18n/locales/de.ts @@ -1507,7 +1507,7 @@ export const de: typeof en = { "dynamicColumnConfig": "Säuleneinstellung", "dynamicColumnConfigDesc": "Dynamische Spalteneinstellungen. Akzeptiert ein Array von Spaltennamen. In der Standardeinstellung sind alle Spalten sichtbar. Beispiel: [%r@\\\"id%r@\\\", %r@\\\"name%r@\\\"]", "position": "Position", - "showDataLoadSpinner": "Spinner beim Laden von Daten anzeigen", + "showDataLoadSpinner": "Ladeanzeige anzeigen", "showValue": "Wert anzeigen", "expandable": "Ausbaufähig", "configExpandedView": "Expandierte Ansicht konfigurieren", diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 61d0ae8a6..3261fd179 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -218,6 +218,8 @@ export const en = { "className": "CSS Class name", "dataTestId": "Individual ID", "preventOverwriting": "Prevent overwriting styles", + "showComponentLoadingIndicators": "Show loading indicators when component load", + "showDataLoadingIndicators": "Show loading indicators when data load", "color": "Color", "horizontalGridCells": "Horizontal Grid Cells", "showHorizontalScrollbar": "Show Horizontal Scrollbar", @@ -1991,7 +1993,7 @@ export const en = { "dynamicColumnConfig": "Visible Columns", "dynamicColumnConfigDesc": "Dynamic Column Visibility. Accepts an Array of Column Names. All Columns Are Visible by Default. Example: [\"id\", \"name\"]", "position": "Position", - "showDataLoadSpinner": "Show Spinner During Data Loading", + "showDataLoadSpinner": "Show Loading Indicator", "showValue": "Show Value", "expandable": "Expandable", "configExpandedView": "Configure Expanded View", diff --git a/client/packages/lowcoder/src/i18n/locales/pt.ts b/client/packages/lowcoder/src/i18n/locales/pt.ts index 1a84ea9f4..22689ce5a 100644 --- a/client/packages/lowcoder/src/i18n/locales/pt.ts +++ b/client/packages/lowcoder/src/i18n/locales/pt.ts @@ -2039,7 +2039,7 @@ export const pt: typeof en = { "dynamicColumnConfig": "Configuração de Coluna", "dynamicColumnConfigDesc": "Configurações de coluna dinâmica. Aceita um array de nomes de colunas. Todas as colunas são visíveis por padrão. Exemplo: [\"id\", \"name\"]", "position": "Posição", - "showDataLoadSpinner": "Mostrar Spinner Durante o Carregamento de Dados", + "showDataLoadSpinner": "Mostrar indicador de carregamento", "showValue": "Mostrar Valor", "expandable": "Expansível", "configExpandedView": "Configurar Visualização Expandida", diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts index 679eb9d12..d1203fa8e 100644 --- a/client/packages/lowcoder/src/i18n/locales/zh.ts +++ b/client/packages/lowcoder/src/i18n/locales/zh.ts @@ -1536,7 +1536,7 @@ export const zh: typeof en = { dynamicColumnConfig: "列设置", dynamicColumnConfigDesc: "动态列设置.接受一个列名的数组,默认情况下所有列都可见.\n" + `示例:["id", "name"]`, position: "位置", - showDataLoadSpinner: "数据加载时显示加载指示器", + showDataLoadSpinner: "显示加载指示器", showValue: "显示值", expandable: "可展开", configExpandedView: "配置展开视图", From bef4782daee693d0f2584b78c4e0c4e4db9a979d Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Sat, 7 Sep 2024 01:02:57 +0500 Subject: [PATCH 10/11] moved show data/component loader option in theme --- .../lowcoder/src/api/commonSettingApi.ts | 2 + .../src/components/ThemeSettingsSelector.tsx | 76 ++++++++++++++++--- .../src/comps/comps/appSettingsComp.tsx | 14 ---- .../comps/comps/lazyLoadComp/lazyLoadComp.tsx | 8 +- .../comps/comps/tableComp/tableCompView.tsx | 7 +- .../lowcoder/src/constants/themeConstants.ts | 2 + .../packages/lowcoder/src/i18n/locales/en.ts | 7 +- .../src/pages/setting/theme/detail/index.tsx | 54 +++++++++++-- .../src/pages/setting/theme/themeConstant.tsx | 6 ++ 9 files changed, 135 insertions(+), 41 deletions(-) diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts index 1e7d23227..6b80e4527 100644 --- a/client/packages/lowcoder/src/api/commonSettingApi.ts +++ b/client/packages/lowcoder/src/api/commonSettingApi.ts @@ -66,6 +66,8 @@ export interface ThemeDetail { boxShadowColor?: string; animationIterationCount?: string; components?: Record; + showComponentLoadingIndicators?: boolean; + showDataLoadingIndicators?: boolean; } export function getThemeDetailName(key: keyof ThemeDetail) { diff --git a/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx b/client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx index 1aef3f138..91aa91d1d 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, toHex } from "components/colorSelect/colorUtils"; import { ColorSelect } from "components/colorSelect"; import { TacoInput } from "components/tacoInput"; -import { Slider } from "antd"; +import { Slider, Switch } from "antd"; import { ExpandIcon, CompressIcon, @@ -27,6 +27,8 @@ export type configChangeParams = { borderWidth?: string; fontFamily?: string; components?: Record, + showComponentLoadingIndicators?: boolean; + showDataLoadingIndicators?: boolean; }; type ColorConfigProps = { @@ -46,6 +48,8 @@ type ColorConfigProps = { margin?: string; padding?: string; gridColumns?: string; // Added By Aqib Mirza + showComponentLoadingIndicators?: boolean; + showDataLoadingIndicators?: boolean; }; export default function ThemeSettingsSelector(props: ColorConfigProps) { @@ -63,7 +67,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { borderStyle: defaultBorderStyle, borderWidth: defaultBorderWidth, borderColor: defaultBorderColor, - fontFamily: defaultFontFamily + fontFamily: defaultFontFamily, + showComponentLoadingIndicators: defaultShowComponentLoaders, + showDataLoadingIndicators: defaultShowDataLoaders, } = props; const configChangeWithDebounce = _.debounce(configChange, 0); @@ -76,6 +82,8 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { const [borderWidth, setBorderWidth] = useState(defaultBorderWidth); const [borderColor, setBorderColor] = useState(defaultBorderColor); const [fontFamily, setFontFamily] = useState(defaultFontFamily); + const [showComponentLoaders, setComponentLoaders] = useState(defaultShowComponentLoaders); + const [showDataLoaders, setDataLoaders] = useState(defaultShowDataLoaders); const varName = `(${themeSettingKey})`; @@ -229,14 +237,26 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { setFontFamily(defaultFontFamily); }, [defaultFontFamily]); + useEffect(() => { + setComponentLoaders(defaultShowComponentLoaders); + }, [defaultShowComponentLoaders]); + + useEffect(() => { + setDataLoaders(defaultShowDataLoaders); + }, [defaultShowDataLoaders]); + return ( -
-
- {name} {showVarName && {varName}} + {themeSettingKey !== "showDataLoadingIndicators" + && themeSettingKey !== "showComponentLoadingIndicators" + && ( +
+
+ {name} {showVarName && {varName}} +
+
{desc}
-
{desc}
-
+ )} {themeSettingKey !== "radius" && themeSettingKey !== "margin" && @@ -244,7 +264,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) { themeSettingKey !== "gridColumns" && themeSettingKey !== "borderStyle" && themeSettingKey !== "borderWidth" && - themeSettingKey !== "fontFamily" && ( + themeSettingKey !== "fontFamily" && + themeSettingKey !== "showComponentLoadingIndicators" && + themeSettingKey !== "showDataLoadingIndicators" && (
)} - - {themeSettingKey === "fontFamily" && (
)} + {themeSettingKey === "showComponentLoadingIndicators" && ( +
+ { + debugger; + setComponentLoaders(value) + configChange({ themeSettingKey, showComponentLoadingIndicators: value}); + }} + /> + {name} +
+ )} + + {themeSettingKey === "showDataLoadingIndicators" && ( +
+ { + setDataLoaders(value) + configChange({ themeSettingKey, showDataLoadingIndicators: value}); + }} + /> + {name} +
+ )} ); } diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx index a0a30b8b2..a471dea7c 100644 --- a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx @@ -185,8 +185,6 @@ const childrenMap = { maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"), themeId: valueComp(DEFAULT_THEMEID), preventAppStylesOverwriting: withDefault(BoolControl, true), - showComponentLoadingIndicators: withDefault(BoolControl, true), - showDataLoadingIndicators: withDefault(BoolControl, true), customShortcuts: CustomShortcutsComp, disableCollision: valueComp(false), lowcoderCompVersion: withDefault(StringControl, 'latest'), @@ -209,8 +207,6 @@ function AppSettingsModal(props: ChildrenInstance) { category, showHeaderInPublic, preventAppStylesOverwriting, - showComponentLoadingIndicators, - showDataLoadingIndicators, lowcoderCompVersion, } = props; @@ -325,16 +321,6 @@ function AppSettingsModal(props: ChildrenInstance) { label: trans("prop.preventOverwriting"), })}
-
- {showComponentLoadingIndicators.propertyView({ - label: trans("prop.showComponentLoadingIndicators"), - })} -
-
- {showDataLoadingIndicators.propertyView({ - label: trans("prop.showDataLoadingIndicators"), - })} -
diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx index 1ae6f3ba0..981d3852f 100644 --- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx @@ -8,9 +8,9 @@ import { WhiteLoading } from "lowcoder-design"; import { useContext, useState } from "react"; import { useMount } from "react-use"; import styled from "styled-components"; -import { RemoteCompInfo, RemoteCompLoader } from "types/remoteComp"; +import { RemoteCompInfo } from "types/remoteComp"; import { withErrorBoundary } from "comps/generators/withErrorBoundary"; -import { EditorContext } from "@lowcoder-ee/comps/editorState"; +import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext"; const ViewError = styled.div` display: flex; @@ -53,8 +53,8 @@ interface LazyCompViewProps { function LazyCompView(props: React.PropsWithChildren) { const { loadComp, loadingElement, errorElement } = props; const [error, setError] = useState(""); - const editorState = useContext(EditorContext); - const showComponentLoadingIndicators = editorState?.getAppSettings().showComponentLoadingIndicators; + const currentTheme = useContext(ThemeContext)?.theme; + const showComponentLoadingIndicators = currentTheme?.showComponentLoadingIndicators; useMount(() => { setError(""); diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx index f73619e8a..7c3176a71 100644 --- a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx +++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx @@ -40,14 +40,14 @@ import { SlotConfigContext } from "comps/controls/slotControl"; import { EmptyContent } from "pages/common/styledComponent"; import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"; import { ReactRef, ResizeHandleAxis } from "layout/gridLayoutPropTypes"; -import { CellColorViewType, ColumnComp } from "./column/tableColumnComp"; +import { CellColorViewType } from "./column/tableColumnComp"; import { defaultTheme } from "@lowcoder-ee/constants/themeConstants"; import { childrenToProps } from "@lowcoder-ee/comps/generators/multi"; import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil"; import { TableSummary } from "./tableSummaryComp"; -import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined"; import Skeleton from "antd/es/skeleton"; import { SkeletonButtonProps } from "antd/es/skeleton/Button"; +import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext"; export const EMPTY_ROW_KEY = 'empty_row'; @@ -765,7 +765,8 @@ export function TableCompView(props: { }) { const [emptyRowsMap, setEmptyRowsMap] = useState>({}); const editorState = useContext(EditorContext); - const showDataLoadingIndicators = editorState?.getAppSettings().showDataLoadingIndicators; + const currentTheme = useContext(ThemeContext)?.theme; + const showDataLoadingIndicators = currentTheme?.showDataLoadingIndicators; const { width, ref } = useResizeDetector({ refreshMode: "debounce", refreshRate: 600, diff --git a/client/packages/lowcoder/src/constants/themeConstants.ts b/client/packages/lowcoder/src/constants/themeConstants.ts index 455046fce..827602d7d 100644 --- a/client/packages/lowcoder/src/constants/themeConstants.ts +++ b/client/packages/lowcoder/src/constants/themeConstants.ts @@ -23,6 +23,8 @@ const theme = { boxShadow: "", boxShadowColor: "", animationIterationCount: "", + showComponentLoadingIndicators: true, + showDataLoadingIndicators: true, }; const text = { diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 3261fd179..71c260e19 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -218,8 +218,6 @@ export const en = { "className": "CSS Class name", "dataTestId": "Individual ID", "preventOverwriting": "Prevent overwriting styles", - "showComponentLoadingIndicators": "Show loading indicators when component load", - "showDataLoadingIndicators": "Show loading indicators when data load", "color": "Color", "horizontalGridCells": "Horizontal Grid Cells", "showHorizontalScrollbar": "Show Horizontal Scrollbar", @@ -2608,7 +2606,10 @@ export const en = { "containerHeaderPadding": "Header Padding", "containerheaderpaddingDesc": "Default header padding typically used for most components", "gridColumns": "Canvas Grid Columns", - "gridColumnsDesc": "Default number of columns typically used for most containers" + "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" }, "pluginSetting": { "title": "Plugins", 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 513a598cf..8013a1b7c 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx @@ -174,7 +174,7 @@ class ThemeDetailPage extends React.Component { this.configChange(params); }} @@ -483,7 +502,7 @@ class ThemeDetailPage extends React.Component { this.configChange(params); }} @@ -493,7 +512,7 @@ class ThemeDetailPage extends React.Component { this.configChange(params); }} @@ -503,7 +522,7 @@ class ThemeDetailPage extends React.Component { this.configChange(params); }} @@ -513,7 +532,7 @@ class ThemeDetailPage extends React.Component { this.configChange(params); }} @@ -523,7 +542,28 @@ class ThemeDetailPage extends React.Component { + this.configChange(params); + }} + /> + } + {layoutSettingsItem.type == "showComponentLoadingIndicators" && + { + console.log('configChange', params); + this.configChange(params); + }} + /> + } + {layoutSettingsItem.type == "showDataLoadingIndicators" && + { this.configChange(params); }} diff --git a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx index a68d453d1..e0fbab429 100644 --- a/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx +++ b/client/packages/lowcoder/src/pages/setting/theme/themeConstant.tsx @@ -32,6 +32,8 @@ export const themeTemplateList = [ gridColumns: "24", //Added By Aqib Mirza margin: "3px", padding: "3px", + showComponentLoadingIndicators: true, + showDataLoadingIndicators: true, }, }, { @@ -49,6 +51,8 @@ export const themeTemplateList = [ gridColumns: "24", //Added By Aqib Mirza margin: "3px", padding: "3px", + showComponentLoadingIndicators: true, + showDataLoadingIndicators: true, }, }, { @@ -66,6 +70,8 @@ export const themeTemplateList = [ gridColumns: "24", //Added By Aqib Mirza margin: "3px", padding: "3px", + showComponentLoadingIndicators: true, + showDataLoadingIndicators: true, }, }, ]; From 21561a939053f809a359f93e2d491ff8b11eac4a Mon Sep 17 00:00:00 2001 From: RAHEEL Date: Sat, 7 Sep 2024 01:06:45 +0500 Subject: [PATCH 11/11] removed comments --- client/packages/lowcoder-design/src/components/button.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/client/packages/lowcoder-design/src/components/button.tsx b/client/packages/lowcoder-design/src/components/button.tsx index d113e6dce..be045d7d7 100644 --- a/client/packages/lowcoder-design/src/components/button.tsx +++ b/client/packages/lowcoder-design/src/components/button.tsx @@ -208,11 +208,6 @@ const TacoButton = forwardRef( {props.icon} {props.children} - {/* */} }