Keep the feed spinner up while a list is still paging
This commit is contained in:
parent
259091ba64
commit
daad7bf5a2
2 changed files with 17 additions and 3 deletions
|
|
@ -415,14 +415,21 @@ const makeFeedLoader = (load: () => Promise<FeedSpan>) => {
|
||||||
|
|
||||||
if (found > 0) break
|
if (found > 0) break
|
||||||
}
|
}
|
||||||
|
|
||||||
state.set({status: "idle"})
|
|
||||||
} finally {
|
} finally {
|
||||||
running = false
|
running = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return {subscribe: state.subscribe, run}
|
// A run covers a few spans and the scroller starts another one a moment later, so settling at
|
||||||
|
// the end of a run blinks the spinner once per page. What ends a load is the trigger going
|
||||||
|
// quiet — the list grown long enough that nothing more is wanted.
|
||||||
|
const settle = () => {
|
||||||
|
if (!running && isFeedLoading(get(state))) {
|
||||||
|
state.set({status: "idle"})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {subscribe: state.subscribe, run, settle}
|
||||||
}
|
}
|
||||||
|
|
||||||
// A loader triggered by proximity to the end of a scroll container, which is how every list in
|
// A loader triggered by proximity to the end of a scroll container, which is how every list in
|
||||||
|
|
@ -441,6 +448,7 @@ export const makeScrollLoader = (
|
||||||
threshold: 5000,
|
threshold: 5000,
|
||||||
...options,
|
...options,
|
||||||
onScroll: loader.run,
|
onScroll: loader.run,
|
||||||
|
onSettle: loader.settle,
|
||||||
})
|
})
|
||||||
|
|
||||||
return {subscribe: loader.subscribe, stop: scroller.stop}
|
return {subscribe: loader.subscribe, stop: scroller.stop}
|
||||||
|
|
|
||||||
|
|
@ -90,6 +90,9 @@ export const copyToClipboard = (text: string) => {
|
||||||
|
|
||||||
export type ScrollerOpts = {
|
export type ScrollerOpts = {
|
||||||
onScroll: () => any
|
onScroll: () => any
|
||||||
|
// Called by a check that decides nothing more is wanted, which is the only signal that paging
|
||||||
|
// has stopped rather than paused between requests.
|
||||||
|
onSettle?: () => any
|
||||||
element: Element
|
element: Element
|
||||||
threshold?: number
|
threshold?: number
|
||||||
reverse?: boolean
|
reverse?: boolean
|
||||||
|
|
@ -103,6 +106,7 @@ export type Scroller = {
|
||||||
|
|
||||||
export const createScroller = ({
|
export const createScroller = ({
|
||||||
onScroll,
|
onScroll,
|
||||||
|
onSettle,
|
||||||
element,
|
element,
|
||||||
delay = 1000,
|
delay = 1000,
|
||||||
threshold = 2000,
|
threshold = 2000,
|
||||||
|
|
@ -134,6 +138,8 @@ export const createScroller = ({
|
||||||
// Only trigger loading the first time we reach the threshold
|
// Only trigger loading the first time we reach the threshold
|
||||||
if (shouldLoad) {
|
if (shouldLoad) {
|
||||||
await onScroll()
|
await onScroll()
|
||||||
|
} else {
|
||||||
|
onSettle?.()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue