ux: admin: avoid saying "no rows" in lists while still loading
Massimo Melina committed
Jul 16, 2023 at 18:54 UTC
26a83e71beabd4a72871d4e3b226a4d03bf35268
4 files changed
+9
-5
admin/src/DataTable.ts
+6
-2
@@ -4,7 +4,7 @@ import { useWindowSize } from 'usehooks-ts'
4
import { createElement as h, Fragment, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
5
import { newDialog, onlyTruthy } from '@hfs/shared'
6
import _ from 'lodash'
7
-import { Flex } from './misc'
7
+import { Center, Flex } from './misc'
8
9
const ACTIONS = 'Actions'
10
@@ -16,8 +16,9 @@ interface DataTableProps<R extends GridValidRowModel=any> extends Omit<DataGridP
16
actions?: ({ row, id }: any) => ReactNode[]
17
actionsProps?: Partial<GridColDef<R>> & { hideUnder?: Breakpoint | number }
18
initializing?: boolean
19
+ noRows?: ReactNode
20
}
20
-export function DataTable({ columns, initialState={}, actions, actionsProps, initializing, ...rest }: DataTableProps) {
21
+export function DataTable({ columns, initialState={}, actions, actionsProps, initializing, noRows, ...rest }: DataTableProps) {
22
const { width } = useWindowSize()
23
const theme = useTheme()
24
const apiRef = useGridApiRef()
@@ -87,6 +88,9 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
88
initialState,
89
columns: manipulatedColumns,
90
apiRef,
91
+ slots: {
92
+ ...(noRows || initializing) && { noRowsOverlay: () => initializing ? null : h(Center, {}, noRows) },
93
+ },
94
onCellClick({ field, row }) {
95
if (field === ACTIONS) return
96
const n = apiRef.current.getVisibleColumns().length
admin/src/InstalledPlugins.ts
+1
-1
@@ -22,7 +22,7 @@ export default function InstalledPlugins({ updates }: { updates?: true }) {
22
disableColumnSelector: true,
23
disableColumnMenu: true,
24
hideFooter: true,
25
- localeText: updates && { noRowsLabel: `No updates available. Only plugins available on "search online" are checked.` },
25
+ noRows: updates && `No updates available. Only plugins available on "search online" are checked.`,
26
columns: [
27
{
28
field: 'id',
admin/src/MonitorPage.ts
+1
-1
@@ -107,7 +107,7 @@ function Connections() {
107
error ? h(Alert, { severity: 'error' }, error)
108
: h(DataTable, {
109
rows,
110
- localeText: filtered ? { noRowsLabel: "No downloads at the moment" } : undefined,
110
+ noRows: filtered && "No downloads at the moment",
111
columns: [
112
{
113
field: 'ip',
admin/src/OnlinePlugins.ts
+1
-1
@@ -30,7 +30,7 @@ export default function OnlinePlugins() {
30
}),
31
h(DataTable, {
32
rows: list.length ? list : [], // workaround for DataGrid bug causing 'no rows' message to be not displayed after 'loading' was also used
33
- localeText: { noRowsLabel: "No compatible plugins have been found" },
33
+ noRows: "No compatible plugins have been found",
34
initializing,
35
columnVisibilityModel: snap.onlinePluginsColumns,
36
onColumnVisibilityModelChange: newModel => Object.assign(state.onlinePluginsColumns, newModel),