ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-14 01:50:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): eliminate flash when auto-folding work sections on page load

Browse source 
Replace useEffect with synchronous state derivation during render so
the browser never paints the unfolded intermediate state. This prevents
the visible "jump" when loading an issue page with already-completed
work sections like "worked for 4 minutes".

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-08 07:44:43 -05:00
parent 7edd2f7946
commit 28a28d1cb6
1 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

17
ui/src/components/IssueChatThread.tsx
View file

@ -820,23 +820,24 @@ function IssueChatAssistantMessage() {
const hasCoT = message.content.some((p) => p.type === "reasoning" || p.type === "tool-call");
const isFoldable = !isRunning && hasCoT && !!chainOfThoughtLabel;
const [folded, setFolded] = useState(isFoldable);
const previousMessageIdRef = useRef<string | null>(message.id);
const previousIsFoldableRef = useRef(isFoldable);
const [prevFoldKey, setPrevFoldKey] = useState({ messageId: message.id, isFoldable });
useEffect(() => {
// Derive fold state synchronously during render (not in useEffect) so the
// browser never paints the un-folded intermediate state — prevents the
// visible "jump" when loading a page with already-folded work sections.
if (message.id !== prevFoldKey.messageId || isFoldable !== prevFoldKey.isFoldable) {
const nextFolded = resolveAssistantMessageFoldedState({
messageId: message.id,
currentFolded: folded,
isFoldable,
previousMessageId: previousMessageIdRef.current,
previousIsFoldable: previousIsFoldableRef.current,
previousMessageId: prevFoldKey.messageId,
previousIsFoldable: prevFoldKey.isFoldable,
});
previousMessageIdRef.current = message.id;
previousIsFoldableRef.current = isFoldable;
setPrevFoldKey({ messageId: message.id, isFoldable });
if (nextFolded !== folded) {
setFolded(nextFolded);
}
}, [folded, isFoldable, message.id]);
}
const handleVote = async (
vote: FeedbackVoteValue,