Skip to content

Commit 2bde9ea

Browse files
dines-rldines-rl
committed
cp dines
1 parent 445ffea commit 2bde9ea

4 files changed

Lines changed: 54 additions & 23 deletions

File tree

‎src/commands/blueprint/list.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ const ListBlueprintsUI = ({
126126
const {
127127
items: blueprints,
128128
loading,
129+
navigating,
129130
error: listError,
130131
currentPage,
131132
hasMore,
@@ -434,10 +435,10 @@ const ListBlueprintsUI = ({
434435
setSelectedIndex(selectedIndex - 1);
435436
} else if (key.downArrow && selectedIndex < pageBlueprints - 1) {
436437
setSelectedIndex(selectedIndex + 1);
437-
} else if ((input === "n" || key.rightArrow) && !loading && hasMore) {
438+
} else if ((input === "n" || key.rightArrow) && !loading && !navigating && hasMore) {
438439
nextPage();
439440
setSelectedIndex(0);
440-
} else if ((input === "p" || key.leftArrow) && !loading && hasPrev) {
441+
} else if ((input === "p" || key.leftArrow) && !loading && !navigating && hasPrev) {
441442
prevPage();
442443
setSelectedIndex(0);
443444
} else if (input === "a") {
@@ -665,9 +666,15 @@ const ListBlueprintsUI = ({
665666
{" "}
666667
•{" "}
667668
</Text>
668-
<Text color={colors.textDim} dimColor>
669-
Page {currentPage + 1} of {totalPages}
670-
</Text>
669+
{navigating ? (
670+
<Text color={colors.warning}>
671+
{figures.pointer} Loading page {currentPage + 1}...
672+
</Text>
673+
) : (
674+
<Text color={colors.textDim} dimColor>
675+
Page {currentPage + 1} of {totalPages}
676+
</Text>
677+
)}
671678
</>
672679
)}
673680
<Text color={colors.textDim} dimColor>

‎src/commands/devbox/list.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ const ListDevboxesUI = ({
135135
const {
136136
items: devboxes,
137137
loading,
138+
navigating,
138139
error,
139140
currentPage,
140141
hasMore,
@@ -504,10 +505,10 @@ const ListDevboxesUI = ({
504505
setSelectedIndex(selectedIndex - 1);
505506
} else if (key.downArrow && selectedIndex < pageDevboxes - 1) {
506507
setSelectedIndex(selectedIndex + 1);
507-
} else if ((input === "n" || key.rightArrow) && !loading && hasMore) {
508+
} else if ((input === "n" || key.rightArrow) && !loading && !navigating && hasMore) {
508509
nextPage();
509510
setSelectedIndex(0);
510-
} else if ((input === "p" || key.leftArrow) && !loading && hasPrev) {
511+
} else if ((input === "p" || key.leftArrow) && !loading && !navigating && hasPrev) {
511512
prevPage();
512513
setSelectedIndex(0);
513514
} else if (key.return) {
@@ -689,9 +690,15 @@ const ListDevboxesUI = ({
689690
{" "}
690691
•{" "}
691692
</Text>
692-
<Text color={colors.textDim} dimColor>
693-
Page {currentPage + 1} of {totalPages}
694-
</Text>
693+
{navigating ? (
694+
<Text color={colors.warning}>
695+
{figures.pointer} Loading page {currentPage + 1}...
696+
</Text>
697+
) : (
698+
<Text color={colors.textDim} dimColor>
699+
Page {currentPage + 1} of {totalPages}
700+
</Text>
701+
)}
695702
</>
696703
)}
697704
<Text color={colors.textDim} dimColor>

‎src/commands/snapshot/list.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ const ListSnapshotsUI = ({
104104
const {
105105
items: snapshots,
106106
loading,
107+
navigating,
107108
error,
108109
currentPage,
109110
hasMore,
@@ -187,10 +188,10 @@ const ListSnapshotsUI = ({
187188
setSelectedIndex(selectedIndex - 1);
188189
} else if (key.downArrow && selectedIndex < pageSnapshots - 1) {
189190
setSelectedIndex(selectedIndex + 1);
190-
} else if ((input === "n" || key.rightArrow) && !loading && hasMore) {
191+
} else if ((input === "n" || key.rightArrow) && !loading && !navigating && hasMore) {
191192
nextPage();
192193
setSelectedIndex(0);
193-
} else if ((input === "p" || key.leftArrow) && !loading && hasPrev) {
194+
} else if ((input === "p" || key.leftArrow) && !loading && !navigating && hasPrev) {
194195
prevPage();
195196
setSelectedIndex(0);
196197
} else if (key.escape) {
@@ -289,9 +290,15 @@ const ListSnapshotsUI = ({
289290
{" "}
290291
•{" "}
291292
</Text>
292-
<Text color={colors.textDim} dimColor>
293-
Page {currentPage + 1} of {totalPages}
294-
</Text>
293+
{navigating ? (
294+
<Text color={colors.warning}>
295+
{figures.pointer} Loading page {currentPage + 1}...
296+
</Text>
297+
) : (
298+
<Text color={colors.textDim} dimColor>
299+
Page {currentPage + 1} of {totalPages}
300+
</Text>
301+
)}
295302
</>
296303
)}
297304
<Text color={colors.textDim} dimColor>

‎src/hooks/useCursorPagination.ts‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,12 @@ export interface UsePaginatedListResult<T> {
3939
/** Current page items */
4040
items: T[];
4141

42-
/** True during initial load or page navigation */
42+
/** True during initial load only (no items yet) */
4343
loading: boolean;
4444

45+
/** True when navigating between pages (shows existing items while loading) */
46+
navigating: boolean;
47+
4548
/** Error from last fetch attempt */
4649
error: Error | null;
4750

@@ -96,6 +99,7 @@ export function useCursorPagination<T>(
9699
// State
97100
const [items, setItems] = React.useState<T[]>([]);
98101
const [loading, setLoading] = React.useState(true);
102+
const [navigating, setNavigating] = React.useState(false);
99103
const [error, setError] = React.useState<Error | null>(null);
100104
const [currentPage, setCurrentPage] = React.useState(0);
101105
const [hasMore, setHasMore] = React.useState(false);
@@ -141,9 +145,10 @@ export function useCursorPagination<T>(
141145
* Fetch a specific page
142146
* @param page - Page number to fetch (0-indexed)
143147
* @param isInitialLoad - Whether this is the initial load (shows loading state)
148+
* @param isNavigation - Whether this is a page navigation (shows navigating state)
144149
*/
145150
const fetchPageData = React.useCallback(
146-
async (page: number, isInitialLoad: boolean = false) => {
151+
async (page: number, isInitialLoad: boolean = false, isNavigation: boolean = false) => {
147152
if (!isMountedRef.current) return;
148153
if (isFetchingRef.current) return;
149154

@@ -153,6 +158,9 @@ export function useCursorPagination<T>(
153158
if (isInitialLoad) {
154159
setLoading(true);
155160
}
161+
if (isNavigation) {
162+
setNavigating(true);
163+
}
156164
setError(null);
157165

158166
// Determine startingAt cursor:
@@ -190,6 +198,7 @@ export function useCursorPagination<T>(
190198
} finally {
191199
if (isMountedRef.current) {
192200
setLoading(false);
201+
setNavigating(false);
193202
}
194203
isFetchingRef.current = false;
195204
}
@@ -227,20 +236,20 @@ export function useCursorPagination<T>(
227236

228237
// Navigation functions
229238
const nextPage = React.useCallback(() => {
230-
if (!loading && hasMore) {
239+
if (!loading && !navigating && hasMore) {
231240
const newPage = currentPage + 1;
232241
setCurrentPage(newPage);
233-
fetchPageData(newPage, true);
242+
fetchPageData(newPage, false, true);
234243
}
235-
}, [loading, hasMore, currentPage, fetchPageData]);
244+
}, [loading, navigating, hasMore, currentPage, fetchPageData]);
236245

237246
const prevPage = React.useCallback(() => {
238-
if (!loading && currentPage > 0) {
247+
if (!loading && !navigating && currentPage > 0) {
239248
const newPage = currentPage - 1;
240249
setCurrentPage(newPage);
241-
fetchPageData(newPage, true);
250+
fetchPageData(newPage, false, true);
242251
}
243-
}, [loading, currentPage, fetchPageData]);
252+
}, [loading, navigating, currentPage, fetchPageData]);
244253

245254
const refresh = React.useCallback(() => {
246255
fetchPageData(currentPage, false);
@@ -249,6 +258,7 @@ export function useCursorPagination<T>(
249258
return {
250259
items,
251260
loading,
261+
navigating,
252262
error,
253263
currentPage,
254264
hasMore,

0 commit comments

Comments
 (0)