From d17f6d79cb93eaaceca0aea0a869502e338b1bf1 Mon Sep 17 00:00:00 2001
From: mkljczk <git@mkljczk.pl>
Date: Fri, 31 Jan 2025 19:38:48 +0100
Subject: [PATCH] pl-fe: try to reduce timeline jumps

Signed-off-by: mkljczk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/status-content.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/pl-fe/src/components/status-content.tsx b/packages/pl-fe/src/components/status-content.tsx
index f2d9a9013..b68d1eb6e 100644
--- a/packages/pl-fe/src/components/status-content.tsx
+++ b/packages/pl-fe/src/components/status-content.tsx
@@ -83,7 +83,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
 }) => {
   const { displaySpoilers } = useSettings();
 
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState<boolean | null>(null);
   const [onlyEmoji, setOnlyEmoji] = useState(false);
   const [lineClamp, setLineClamp] = useState(true);
 
@@ -99,9 +99,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
 
     if ((collapsable || preview) && !collapsed) {
       // 20px * x lines (+ 2px padding at the top)
-      if (node.current.clientHeight > (preview ? 82 : isQuote ? 202 : 282)) {
-        setCollapsed(true);
-      }
+      setCollapsed(node.current.clientHeight >= (preview ? 82 : isQuote ? 202 : 282));
     }
   };
 
@@ -125,7 +123,7 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
   useLayoutEffect(() => {
     maybeSetCollapsed();
     maybeSetOnlyEmoji();
-  });
+  }, []);
 
   const content = useMemo(
     (): string => translation
@@ -154,14 +152,17 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
     : status.spoiler_text;
 
   const direction = getTextDirection(status.search_index);
-  const className = clsx('relative text-ellipsis break-words text-gray-900 focus:outline-none dark:text-gray-100', {
+  const className = useMemo(() => clsx('relative text-ellipsis break-words text-gray-900 focus:outline-none dark:text-gray-100', {
     'cursor-pointer': onClick,
     'overflow-hidden': collapsed,
     'max-h-[200px]': collapsed && !isQuote && !preview,
     'max-h-[120px]': collapsed && isQuote,
     'max-h-[80px]': collapsed && preview,
+    'max-h-[282px]': collapsable && collapsed === null && !isQuote && !preview,
+    'max-h-[202px]': collapsable && collapsed === null && isQuote,
+    'max-h-[82px]': preview && collapsed === null,
     'leading-normal big-emoji': onlyEmoji,
-  });
+  }), [collapsed, onlyEmoji]);
 
   const expandable = !displaySpoilers;
   const expanded = !withSpoiler || statusMeta.expanded || false;