From 3f170d050d720fe5eed3eb60f0783374b5488367 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 27 Sep 2024 17:35:26 +0800
Subject: [PATCH] fix: use difference `layoutId` to fix date element layout
 transition, fixed #664

Signed-off-by: Innei <i@innei.in>
---
 .../entry-column/components/DateItem.tsx      | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/renderer/src/modules/entry-column/components/DateItem.tsx b/apps/renderer/src/modules/entry-column/components/DateItem.tsx
index b5549d717..461b68b84 100644
--- a/apps/renderer/src/modules/entry-column/components/DateItem.tsx
+++ b/apps/renderer/src/modules/entry-column/components/DateItem.tsx
@@ -1,7 +1,16 @@
 import { m } from "framer-motion"
 import { throttle } from "lodash-es"
 import type { FC, PropsWithChildren } from "react"
-import { memo, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react"
+import {
+  cloneElement,
+  memo,
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react"
 import { useDebounceCallback } from "usehooks-ts"
 
 import { SafeFragment } from "~/components/common/Fragment"
@@ -79,10 +88,13 @@ const DateItemInner: FC<{
   Wrapper?: FC<PropsWithChildren>
 }> = ({ date, endTime, startTime, className, Wrapper }) => {
   const rid = useId()
-  const RelativeElement = (
-    <m.span key="b" layout layoutId={rid}>
-      <RelativeDay date={date} />
-    </m.span>
+  const RelativeElement = useMemo(
+    () => (
+      <m.span key="b" layout layoutId={rid}>
+        <RelativeDay date={date} />
+      </m.span>
+    ),
+    [date, rid],
   )
 
   const handleMarkAllAsRead = useMarkAllByRoute({
@@ -108,6 +120,7 @@ const DateItemInner: FC<{
   const { feedId } = useRouteParams()
   const isList = isListSubscription(feedId)
 
+  const tooltipId = useRef(Math.random().toString())
   return (
     <div
       className={cn(className, isSticky && "border-b")}
@@ -122,7 +135,10 @@ const DateItemInner: FC<{
             <span>
               Mark
               <span> </span>
-              {RelativeElement}
+              {useMemo(
+                () => cloneElement(RelativeElement, { layoutId: tooltipId.current }),
+                [RelativeElement],
+              )}
               <span> </span>
               as read
             </span>