Rubicon/tutu
1
0
Fork 0
Code Issues 18 Pull requests 1 Projects 1 Activity Actions

TimelinePanel: rewrite thread expand algorithm
All checks were successful
/ depoly (push) Successful in 1m3s
Details

Browse source
This commit is contained in:
thislight 2024-08-12 12:22:13 +08:00
parent 1e6d4933b9
commit 1c0a83dbab
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
2 changed files with 36 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/timelines/Home.tsx
View file

@ -55,6 +55,7 @@ const TimelinePanel: Component<{
? props.client.v1.timelines[props.name]
: props.client.v1.trends.statuses,
);
const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
const tlEndObserver = new IntersectionObserver(() => {
if (untrack(() => props.prefetch) && !snapshot.loading)
@ -130,6 +131,12 @@ const TimelinePanel: Component<{
onBoost={(...args) => onBoost(index(), ...args)}
onBookmark={(...args) => onBookmark(index(), ...args)}
client={props.client}
expanded={item.id === expandedThreadId() ? 1 : 0}
onExpandChange={() =>
setExpandedThreadId(
item.id !== expandedThreadId() ? item.id : undefined,
)
}
/>
);
}}
@ -138,38 +145,33 @@ const TimelinePanel: Component<{
<div ref={(e) => tlEndObserver.observe(e)}></div>
<Show when={snapshot.loading}>
<div class="loading-line" style={{ width: "100%" }}>
<div
class="loading-line"
style={{
width: "100%",
}}
>
<LinearProgress />
</div>
</Show>
<Show when={snapshot.error}>
<div
style={{
display: "flex",
padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
"align-items": "center",
"justify-content": "center",
}}
<div
style={{
display: "flex",
padding: "20px 0 calc(20px + var(--safe-area-inset-bottom, 0px))",
"align-items": "center",
"justify-content": "center",
}}
>
<Button
variant="contained"
onClick={[refetchTimeline, "old"]}
disabled={snapshot.loading}
>
<Button variant="contained" onClick={[refetchTimeline, "old"]}>
<Show when={snapshot.error} fallback={<>Load More</>}>
Retry
</Button>
</div>
</Show>
<Show when={!props.prefetch && !snapshot.loading}>
<div
style={{
display: "flex",
padding: "20px 0 var(--safe-area-inset-bottom, 20px)",
"align-items": "center",
"justify-content": "center",
}}
>
<Button variant="contained" onClick={[refetchTimeline, "old"]}>
Load More
</Button>
</div>
</Show>
</Show>
</Button>
</div>
</>
);
};