)
}
return (
- // data-measure: natural content height (grows with the number of cards),
+ // data-measure: natural content height (grows with the revealed cards),
// measured by the grid to size the cell so the widget is never height-capped
// or scrolled — it always hugs exactly as many rows of cards as it renders.
-
- {filtered.map((server) => (
-
- ))}
+
+
+ {visible.map((server) => (
+ // content-visibility:auto skips layout/paint for off-screen cards;
+ // contain-intrinsic-size reserves their height so scrolling stays smooth.
+
+
+
+ ))}
+
+ {hasMore && }
)
}
diff --git a/apps/web/src/components/data-table/data-table.tsx b/apps/web/src/components/data-table/data-table.tsx
index 32a61c07..95244e4f 100644
--- a/apps/web/src/components/data-table/data-table.tsx
+++ b/apps/web/src/components/data-table/data-table.tsx
@@ -9,6 +9,9 @@ interface DataTableProps extends React.ComponentProps<'div'> {
actionBar?: React.ReactNode
/** Fill remaining vertical space with a sticky header and internally scrollable body. */
fillHeight?: boolean
+ /** Hide the pagination/action-bar footer entirely. Use when the table renders
+ * all rows (e.g. embedded in a content-sized dashboard widget). */
+ hidePagination?: boolean
/** Optional per-row className, e.g. to dim disabled/offline rows. */
rowClassName?: (row: Row) => string | false | undefined
table: TanstackTable
@@ -20,6 +23,7 @@ export function DataTable({
children,
className,
fillHeight = false,
+ hidePagination = false,
rowClassName,
...props
}: DataTableProps) {
@@ -86,10 +90,12 @@ export function DataTable({
+ )}
)
}
From 261c5a523e9603e2e5aaea1328857952eedee8b4 Mon Sep 17 00:00:00 2001
From: ZingerLittleBee <6970999@gmail.com>
Date: Sat, 30 May 2026 14:24:19 +0800
Subject: [PATCH 5/6] feat(web): show load-more spinner on dashboard
server-cards widget
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Replace the bare scroll sentinel with a spinner + localized loading label so
both grid and list layouts show a loading… indicator at the bottom while more
servers reveal on scroll. Inject DEV-only mock servers into the dashboard route
to exercise the incremental reveal at scale.
---
.../dashboard/widgets/server-cards.tsx | 20 ++++++++++++++++---
apps/web/src/routes/_authed/index.tsx | 6 ++++--
2 files changed, 21 insertions(+), 5 deletions(-)
diff --git a/apps/web/src/components/dashboard/widgets/server-cards.tsx b/apps/web/src/components/dashboard/widgets/server-cards.tsx
index 842b3a36..fdc98ba7 100644
--- a/apps/web/src/components/dashboard/widgets/server-cards.tsx
+++ b/apps/web/src/components/dashboard/widgets/server-cards.tsx
@@ -1,5 +1,6 @@
import { getCoreRowModel, getSortedRowModel, type SortingState, useReactTable } from '@tanstack/react-table'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { Loader2 } from 'lucide-react'
+import { type RefObject, useEffect, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { DataTable } from '@/components/data-table/data-table'
import { ServerCard } from '@/components/server/server-card'
@@ -104,6 +105,19 @@ function ServerListTable({ servers }: { servers: ServerMetrics[] }) {
)
}
+// The sentinel doubles as the load-more indicator: it sits at the bottom of the
+// table/grid, triggers the next batch when scrolled into view, and shows a
+// spinner while more rows remain. It unmounts once everything is revealed.
+function LoadMoreSentinel({ sentinelRef }: { sentinelRef: RefObject }) {
+ const { t } = useTranslation('common')
+ return (
+
+
+ {t('loading')}
+
+ )
+}
+
export function ServerCardsWidget({ config, servers }: ServerCardsWidgetProps) {
const filtered = useMemo(() => filterByIds(servers, config.server_ids, (s) => s.id), [servers, config.server_ids])
const { visibleCount, hasMore, sentinelRef } = useIncrementalReveal(filtered.length)
@@ -125,7 +139,7 @@ export function ServerCardsWidget({ config, servers }: ServerCardsWidgetProps) {
// measured by the grid to size the cell — never height-capped or scrolled.
- {hasMore && }
+ {hasMore && }
)
}
@@ -147,7 +161,7 @@ export function ServerCardsWidget({ config, servers }: ServerCardsWidgetProps) {
))}
- {hasMore && }
+ {hasMore && }
)
}
diff --git a/apps/web/src/routes/_authed/index.tsx b/apps/web/src/routes/_authed/index.tsx
index a384bf43..9e10b37d 100644
--- a/apps/web/src/routes/_authed/index.tsx
+++ b/apps/web/src/routes/_authed/index.tsx
@@ -1,10 +1,11 @@
import { useQuery } from '@tanstack/react-query'
import { createFileRoute } from '@tanstack/react-router'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
import { DashboardEditorView } from '@/components/dashboard/dashboard-editor-view'
import { useAuth } from '@/hooks/use-auth'
import { useDashboard, useDashboards, useDefaultDashboard, useUpdateDashboard } from '@/hooks/use-dashboard'
import type { ServerMetrics } from '@/hooks/use-servers-ws'
+import { withMockServers } from '@/lib/dev-mock-servers'
export const Route = createFileRoute('/_authed/')({
component: DashboardPage
@@ -14,13 +15,14 @@ export function DashboardPage() {
const { user } = useAuth()
const isAdmin = user?.role === 'admin'
- const { data: servers = [] } = useQuery({
+ const { data: rawServers = [] } = useQuery({
queryKey: ['servers'],
queryFn: () => [],
staleTime: Number.POSITIVE_INFINITY,
refetchOnMount: false,
refetchOnWindowFocus: false
})
+ const servers = useMemo(() => withMockServers(rawServers), [rawServers])
const { data: dashboards = [] } = useDashboards()
const { data: defaultDashboard } = useDefaultDashboard()
From dfa8b74fe17c52ab34908c0d4f54c7782c9fc972 Mon Sep 17 00:00:00 2001
From: ZingerLittleBee <6970999@gmail.com>
Date: Sat, 30 May 2026 15:10:51 +0800
Subject: [PATCH 6/6] fix(web): apply content-height widget growth instantly to
stop overlap
Dashboard grid items carry react-grid-layout's default 0.2s transform/height
transition. When a content-height widget grows (e.g. the server-cards widget
revealing more rows on scroll), its height and the translateY of the items below
animate on slightly different timelines, so the growing widget briefly overlaps
the widget beneath it. Disable the transition outside edit mode so content-driven
height changes apply in a single frame; keep it while editing for drag/resize
reflow.
---
apps/web/src/index.css | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index c18c5fb8..5a3816fa 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -144,6 +144,16 @@
opacity: 0.15 !important;
}
+/* Content-driven height changes (live data, scroll-loading more rows) must apply
+ instantly. RGL's default 0.2s transform/height transition animates the growing
+ content-height widget and the items below it on slightly different timelines,
+ so the growing widget briefly overlaps the widget beneath it. Keep the
+ transition only while editing, where it smooths the drag/resize reflow.
+ !important overrides react-grid-layout/css/styles.css loaded later. */
+.dashboard-grid:not(.dashboard-grid--editing) > .react-grid-item {
+ transition: none !important;
+}
+
/* Dashboard resize handle overrides the library's hard-coded dark marker */
.dashboard-grid .dashboard-resize-handle::after {
content: none !important;