Skip to content

Commit 109414c

Browse files
ben-fornefeldben-fornefeld
committed
wip
1 parent d4b2b84 commit 109414c

File tree

3 files changed

+75
-50
lines changed

3 files changed

+75
-50
lines changed

‎src/features/dashboard/templates/builds/table-cells.tsx‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -90,61 +90,67 @@ export function Template({
9090
export function LoadMoreButton({
9191
isLoading,
9292
onLoadMore,
93+
height,
9394
}: {
9495
isLoading: boolean
9596
onLoadMore: () => void
97+
height: number
9698
}) {
97-
if (isLoading) {
98-
return (
99-
<span className="flex items-center gap-2">
100-
<Loader variant="slash" size="sm" />
101-
Loading...
102-
</span>
103-
)
104-
}
10599
return (
106-
<button
107-
onClick={onLoadMore}
108-
className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
109-
>
110-
Load more
111-
</button>
100+
<div className="flex items-center" style={{ height }}>
101+
{isLoading ? (
102+
<span className="flex items-center gap-2">
103+
<Loader variant="slash" size="sm" />
104+
Loading...
105+
</span>
106+
) : (
107+
<button
108+
onClick={onLoadMore}
109+
className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
110+
>
111+
Load more
112+
</button>
113+
)}
114+
</div>
112115
)
113116
}
114117

115118
export function LoadPreviousButton({
116119
isLoading,
117120
onLoadPrevious,
118121
onReset,
122+
height,
119123
}: {
120124
isLoading: boolean
121125
onLoadPrevious: () => void
122126
onReset: () => void
127+
height: number
123128
}) {
124-
if (isLoading) {
125-
return (
126-
<span className="flex items-center gap-2">
127-
<Loader variant="slash" size="sm" />
128-
Loading...
129-
</span>
130-
)
131-
}
132129
return (
133-
<span className="flex items-center gap-3">
134-
<button
135-
onClick={onLoadPrevious}
136-
className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
137-
>
138-
Load newer
139-
</button>
140-
<span className="text-fg-tertiary">·</span>
141-
<button
142-
onClick={onReset}
143-
className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
144-
>
145-
Back to top
146-
</button>
147-
</span>
130+
<div className="flex items-center" style={{ height }}>
131+
{isLoading ? (
132+
<span className="flex items-center gap-2">
133+
<Loader variant="slash" size="sm" />
134+
Loading...
135+
</span>
136+
) : (
137+
<span className="flex items-center gap-3">
138+
<button
139+
onClick={onLoadPrevious}
140+
className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
141+
>
142+
Load newer
143+
</button>
144+
<span className="text-fg-tertiary">·</span>
145+
<button
146+
onClick={onReset}
147+
className="underline text-fg-secondary hover:text-accent-main-highlight transition-colors"
148+
>
149+
Back to top
150+
</button>
151+
</span>
152+
)}
153+
</div>
148154
)
149155
}
150156

‎src/features/dashboard/templates/builds/table.tsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import useFilters from './use-filters'
3434
const BUILDS_REFETCH_INTERVAL = 15_000
3535
const RUNNING_STATUS_INTERVAL = 3_000
3636
const ROW_HEIGHT = 37
37+
const LOADER_ROW_HEIGHT = 48
3738
const OVERSCAN = 10
3839

3940
const COLUMN_WIDTHS = {
@@ -162,10 +163,22 @@ const BuildsTable = () => {
162163
(hasPreviousRow ? 1 : 0) +
163164
(hasNextRow ? 1 : 0)
164165

166+
const lastRowIndex = rowCount - 1
167+
const loadMoreRowIndex = hasNextRow ? lastRowIndex : -1
168+
const loadPreviousRowIndex = hasPreviousRow ? 0 : -1
169+
165170
const virtualizer = useVirtualizer({
166171
count: rowCount,
167172
getScrollElement: () => scrollContainerRef.current,
168-
estimateSize: () => ROW_HEIGHT,
173+
estimateSize: useCallback(
174+
(index: number) => {
175+
if (index === loadPreviousRowIndex || index === loadMoreRowIndex) {
176+
return LOADER_ROW_HEIGHT
177+
}
178+
return ROW_HEIGHT
179+
},
180+
[loadPreviousRowIndex, loadMoreRowIndex]
181+
),
169182
overscan: OVERSCAN,
170183
})
171184

@@ -273,15 +286,19 @@ const BuildsTable = () => {
273286

274287
if (isLoadPreviousRow) {
275288
return (
276-
<TableRow key="load-previous">
289+
<TableRow
290+
key="load-previous"
291+
style={{ height: LOADER_ROW_HEIGHT }}
292+
>
277293
<TableCell
278294
colSpan={6}
279-
className="text-start text-fg-tertiary"
295+
className="text-start text-fg-tertiary py-0"
280296
>
281297
<LoadPreviousButton
282298
isLoading={isFetchingPreviousPage}
283299
onLoadPrevious={handleLoadPrevious}
284300
onReset={handleReset}
301+
height={LOADER_ROW_HEIGHT}
285302
/>
286303
</TableCell>
287304
</TableRow>
@@ -290,14 +307,18 @@ const BuildsTable = () => {
290307

291308
if (isLoadMoreRow) {
292309
return (
293-
<TableRow key="load-more">
310+
<TableRow
311+
key="load-more"
312+
style={{ height: LOADER_ROW_HEIGHT }}
313+
>
294314
<TableCell
295315
colSpan={6}
296-
className="text-start text-fg-tertiary"
316+
className="text-start text-fg-tertiary py-0"
297317
>
298318
<LoadMoreButton
299319
isLoading={isFetchingNextPage}
300320
onLoadMore={handleLoadMore}
321+
height={LOADER_ROW_HEIGHT}
301322
/>
302323
</TableCell>
303324
</TableRow>

‎src/server/api/repositories/builds.repository.ts‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import {
55
mapDatabaseBuildReasonToListedBuildDTOStatusMessage,
66
mapDatabaseBuildStatusToBuildStatusDTO,
77
mapDatabaseBuildToListedBuildDTO,
8-
type RunningBuildStatusDTO,
98
type BuildStatusDB,
9+
type RunningBuildStatusDTO,
1010
} from '../models/builds.models'
1111

1212
// helpers
@@ -110,7 +110,6 @@ export async function listBuilds(
110110
.or(statusFilter)
111111
.order('created_at', { ascending: false })
112112
.order('id', { ascending: false })
113-
.limit(limit + 1)
114113

115114
if (buildIdOrTemplate) {
116115
const resolvedEnvId = await resolveTemplateId(buildIdOrTemplate, teamId)
@@ -144,6 +143,8 @@ export async function listBuilds(
144143
}
145144
}
146145

146+
query.limit(limit + 1)
147+
147148
const { data: rawBuilds, error } = await query
148149

149150
if (error) {
@@ -159,14 +160,11 @@ export async function listBuilds(
159160
}
160161
}
161162

162-
// for backward queries, we need to reverse to maintain chronological order (newest first)
163-
const orderedBuilds = isBackward ? [...rawBuilds].reverse() : rawBuilds
164-
165-
const builds = orderedBuilds.map(mapDatabaseBuildToListedBuildDTO)
163+
const builds = rawBuilds.map(mapDatabaseBuildToListedBuildDTO)
166164
const hasMore = builds.length > limit
167165
const data = hasMore ? builds.slice(0, limit) : builds
168-
const firstRawBuild = orderedBuilds[0]
169-
const lastRawBuild = orderedBuilds[data.length - 1]
166+
const firstRawBuild = rawBuilds[0]
167+
const lastRawBuild = rawBuilds[data.length - 1]
170168

171169
// nextCursor: for fetching older builds (forward direction)
172170
const nextCursor: PaginationCursor | null =

0 commit comments

Comments
 (0)