Mail list: rows glide up into a removed row's place; subjects stopped blinking
The thread-labels query is keyed by the visible ids, so every row leaving the list dropped the label chips until they reloaded and the subjects jumped left and back. Keep the previous labels meanwhile. Rows now animate their position, so the ones below a removed row slide up over it (off under reduced motion). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { keepPreviousData, useQuery } from "@tanstack/react-query";
|
||||
import { useVirtualizer } from "@tanstack/react-virtual";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
@@ -132,6 +132,9 @@ export function MessageList({
|
||||
queryKey: ["thread-labels", threadIds],
|
||||
queryFn: () => api.threadLabelsBatch(threadIds),
|
||||
enabled: threadIds.length > 0,
|
||||
// The key changes whenever a row joins or leaves the list; keep the chips
|
||||
// already known meanwhile, or every subject jumps left and back.
|
||||
placeholderData: keepPreviousData,
|
||||
});
|
||||
const labelMap = labelsQuery.data ?? {};
|
||||
|
||||
@@ -199,7 +202,8 @@ export function MessageList({
|
||||
height: item.size,
|
||||
transform: `translateY(${item.start}px)`,
|
||||
}}
|
||||
className={`group absolute inset-x-0 px-2 pt-[7px] ${
|
||||
// A row leaving the list lets the ones below glide up into its place.
|
||||
className={`group absolute inset-x-0 px-2 pt-[7px] motion-safe:transition-transform motion-safe:duration-200 motion-safe:ease-out ${
|
||||
dimmed ? "pointer-events-none opacity-40" : "cursor-pointer"
|
||||
}`}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user