Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2b2e3da

Browse files
added loading skeleton for table
1 parent e0a80d5 commit 2b2e3da

File tree

5 files changed

+48
-17
lines changed

5 files changed

+48
-17
lines changed

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ import { childrenToProps } from "@lowcoder-ee/comps/generators/multi";
4646
import { getVerticalMargin } from "@lowcoder-ee/util/cssUtil";
4747
import { TableSummary } from "./tableSummaryComp";
4848
import { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";
49+
import Skeleton from "antd/es/skeleton";
50+
import { SkeletonButtonProps } from "antd/es/skeleton/Button";
4951

5052
export const EMPTY_ROW_KEY = 'empty_row';
5153

@@ -439,6 +441,27 @@ const TableTd = styled.td<{
439441
}
440442
`;
441443

444+
const TableTdLoading = styled(Skeleton.Button)<SkeletonButtonProps & {
445+
$tableSize?: string;
446+
}>`
447+
width: 90% !important;
448+
display: table !important;
449+
450+
.ant-skeleton-button {
451+
min-width: auto !important;
452+
display: block !important;
453+
${(props) => props.$tableSize === 'small' && `
454+
height: 20px !important;
455+
`}
456+
${(props) => props.$tableSize === 'middle' && `
457+
height: 24px !important;
458+
`}
459+
${(props) => props.$tableSize === 'large' && `
460+
height: 28px !important;
461+
`}
462+
}
463+
`;
464+
442465
const ResizeableTitle = (props: any) => {
443466
const { onResize, onResizeStop, width, viewModeResizable, ...restProps } = props;
444467
const [widthChild, setWidthChild] = useState(0);
@@ -504,6 +527,7 @@ type CustomTableProps<RecordType> = Omit<TableProps<RecordType>, "components" |
504527
columnsStyle: TableColumnStyleType;
505528
size?: string;
506529
rowAutoHeight?: boolean;
530+
customLoading?: boolean;
507531
onCellClick: (columnName: string, dataIndex: string) => void;
508532
};
509533

@@ -520,6 +544,7 @@ function TableCellView(props: {
520544
linkStyle: TableColumnLinkStyleType;
521545
tableSize?: string;
522546
autoHeight?: boolean;
547+
loading?: boolean;
523548
}) {
524549
const {
525550
record,
@@ -534,6 +559,7 @@ function TableCellView(props: {
534559
linkStyle,
535560
tableSize,
536561
autoHeight,
562+
loading,
537563
...restProps
538564
} = props;
539565

@@ -591,7 +617,10 @@ function TableCellView(props: {
591617
$tableSize={tableSize}
592618
$autoHeight={autoHeight}
593619
>
594-
{children}
620+
{loading
621+
? <TableTdLoading block active $tableSize={tableSize} />
622+
: children
623+
}
595624
</TableTd>
596625
);
597626
}
@@ -629,6 +658,8 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
629658
width: -1,
630659
});
631660
let allColumnFixed = true;
661+
const { customLoading } = props;
662+
632663
const columns = props.columns.map((col, index) => {
633664
const { width, style, linkStyle, cellColorFn, ...restCol } = col;
634665
const resizeWidth = (resizeData.index === index ? resizeData.width : col.width) ?? 0;
@@ -662,7 +693,8 @@ function ResizeableTable<RecordType extends object>(props: CustomTableProps<Reco
662693
autoHeight: props.rowAutoHeight,
663694
onClick: () => {
664695
props.onCellClick(col.titleText, String(col.dataIndex));
665-
}
696+
},
697+
loading: customLoading,
666698
}),
667699
onHeaderCell: () => ({
668700
width: resizeWidth,
@@ -733,6 +765,7 @@ export function TableCompView(props: {
733765
}) {
734766
const [emptyRowsMap, setEmptyRowsMap] = useState<Record<string, RecordType>>({});
735767
const editorState = useContext(EditorContext);
768+
const showDataLoadingIndicators = editorState?.getAppSettings().showDataLoadingIndicators;
736769
const { width, ref } = useResizeDetector({
737770
refreshMode: "debounce",
738771
refreshRate: 600,
@@ -957,6 +990,12 @@ export function TableCompView(props: {
957990
}
958991

959992
const hideScrollbar = !showHorizontalScrollbar && !showVerticalScrollbar;
993+
const showTableLoading = loading ||
994+
// fixme isLoading type
995+
((showDataLoadingIndicators || compChildren.showDataLoadSpinner.getView()) &&
996+
(compChildren.data as any).isLoading()) ||
997+
compChildren.loading.getView();
998+
960999
return (
9611000
<BackgroundColorContext.Provider value={style.background} >
9621001
<BackgroundWrapper
@@ -1018,17 +1057,7 @@ export function TableCompView(props: {
10181057
size={compChildren.size.getView()}
10191058
rowAutoHeight={rowAutoHeight}
10201059
tableLayout="fixed"
1021-
loading={{
1022-
spinning: (
1023-
loading ||
1024-
// fixme isLoading type
1025-
(compChildren.showDataLoadSpinner.getView() &&
1026-
(compChildren.data as any).isLoading()) ||
1027-
compChildren.loading.getView()
1028-
),
1029-
indicator: <LoadingOutlined spin />,
1030-
size: 'large'
1031-
}}
1060+
customLoading={showTableLoading}
10321061
onCellClick={(columnName: string, dataIndex: string) => {
10331062
comp.children.selectedCell.dispatchChangeValueAction({
10341063
name: columnName,

‎client/packages/lowcoder/src/i18n/locales/de.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1507,7 +1507,7 @@ export const de: typeof en = {
15071507
"dynamicColumnConfig": "Säuleneinstellung",
15081508
"dynamicColumnConfigDesc": "Dynamische Spalteneinstellungen. Akzeptiert ein Array von Spaltennamen. In der Standardeinstellung sind alle Spalten sichtbar. Beispiel: [%r@\\\"id%r@\\\", %r@\\\"name%r@\\\"]",
15091509
"position": "Position",
1510-
"showDataLoadSpinner": "Spinner beim Laden von Daten anzeigen",
1510+
"showDataLoadSpinner": "Ladeanzeige anzeigen",
15111511
"showValue": "Wert anzeigen",
15121512
"expandable": "Ausbaufähig",
15131513
"configExpandedView": "Expandierte Ansicht konfigurieren",

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,8 @@ export const en = {
218218
"className": "CSS Class name",
219219
"dataTestId": "Individual ID",
220220
"preventOverwriting": "Prevent overwriting styles",
221+
"showComponentLoadingIndicators": "Show loading indicators when component load",
222+
"showDataLoadingIndicators": "Show loading indicators when data load",
221223
"color": "Color",
222224
"horizontalGridCells": "Horizontal Grid Cells",
223225
"showHorizontalScrollbar": "Show Horizontal Scrollbar",
@@ -1986,7 +1988,7 @@ export const en = {
19861988
"dynamicColumnConfig": "Visible Columns",
19871989
"dynamicColumnConfigDesc": "Dynamic Column Visibility. Accepts an Array of Column Names. All Columns Are Visible by Default. Example: [\"id\", \"name\"]",
19881990
"position": "Position",
1989-
"showDataLoadSpinner": "Show Spinner During Data Loading",
1991+
"showDataLoadSpinner": "Show Loading Indicator",
19901992
"showValue": "Show Value",
19911993
"expandable": "Expandable",
19921994
"configExpandedView": "Configure Expanded View",

‎client/packages/lowcoder/src/i18n/locales/pt.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2039,7 +2039,7 @@ export const pt: typeof en = {
20392039
"dynamicColumnConfig": "Configuração de Coluna",
20402040
"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\"]",
20412041
"position": "Posição",
2042-
"showDataLoadSpinner": "Mostrar Spinner Durante o Carregamento de Dados",
2042+
"showDataLoadSpinner": "Mostrar indicador de carregamento",
20432043
"showValue": "Mostrar Valor",
20442044
"expandable": "Expansível",
20452045
"configExpandedView": "Configurar Visualização Expandida",

‎client/packages/lowcoder/src/i18n/locales/zh.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1536,7 +1536,7 @@ export const zh: typeof en = {
15361536
dynamicColumnConfig: "列设置",
15371537
dynamicColumnConfigDesc: "动态列设置.接受一个列名的数组,默认情况下所有列都可见.\n" + `示例:["id", "name"]`,
15381538
position: "位置",
1539-
showDataLoadSpinner: "数据加载时显示加载指示器",
1539+
showDataLoadSpinner: "显示加载指示器",
15401540
showValue: "显示值",
15411541
expandable: "可展开",
15421542
configExpandedView: "配置展开视图",

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /