disable animated title

fern-api · Jul 26, 2024 · d3e5f49 · d3e5f49
1 parent 97f2dbe
commit d3e5f49
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 51 deletions.
diff --git a/packages/ui/app/src/api-page/endpoints/AnimatedTitle.tsx b/packages/ui/app/src/api-page/endpoints/AnimatedTitle.tsx
@@ -1,58 +1,57 @@
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 
 export const AnimatedTitle: FC<{ children: string }> = ({ children: nextChild }) => {
-    // const [displayText, setDisplayText] = useState(nextChild);
-    // const [prevChild, setPrevChild] = useState(nextChild);
+    const [displayText, setDisplayText] = useState(nextChild);
+    const [prevChild, setPrevChild] = useState(nextChild);
 
-    // useEffect(() => {
-    //     if (prevChild !== nextChild) {
-    //         const commonPrefix = getCommonPrefix(prevChild, nextChild);
-    //         const contractText = prevChild.slice(commonPrefix.length);
-    //         const expandText = nextChild.slice(commonPrefix.length);
+    useEffect(() => {
+        if (prevChild !== nextChild) {
+            const commonPrefix = getCommonPrefix(prevChild, nextChild);
+            const contractText = prevChild.slice(commonPrefix.length);
+            const expandText = nextChild.slice(commonPrefix.length);
 
-    //         let currentIndex = 0;
-    //         const intervalId = setInterval(() => {
-    //             setDisplayText((prevText) => {
-    //                 if (currentIndex >= contractText.length) {
-    //                     clearInterval(intervalId);
-    //                     animateExpand(commonPrefix, expandText);
-    //                     return prevText;
-    //                 }
-    //                 currentIndex++;
-    //                 return commonPrefix + contractText.slice(0, -currentIndex);
-    //             });
-    //         }, 50);
+            let currentIndex = 0;
+            const intervalId = setInterval(() => {
+                setDisplayText((prevText) => {
+                    if (currentIndex >= contractText.length) {
+                        clearInterval(intervalId);
+                        animateExpand(commonPrefix, expandText);
+                        return prevText;
+                    }
+                    currentIndex++;
+                    return commonPrefix + contractText.slice(0, -currentIndex);
+                });
+            }, 50);
 
-    //         return () => {
-    //             clearInterval(intervalId);
-    //         };
-    //     }
-    //     return;
-    // }, [nextChild, prevChild]);
+            return () => {
+                clearInterval(intervalId);
+            };
+        }
+        return;
+    }, [nextChild, prevChild]);
 
-    // const animateExpand = (commonPrefix: string, expandText: string) => {
-    //     let currentIndex = 0;
-    //     const intervalId = setInterval(() => {
-    //         setDisplayText(() => {
-    //             if (currentIndex >= expandText.length) {
-    //                 clearInterval(intervalId);
-    //                 setPrevChild(commonPrefix + expandText);
-    //                 return commonPrefix + expandText;
-    //             }
-    //             currentIndex++;
-    //             return commonPrefix + expandText.slice(0, currentIndex);
-    //         });
-    //     }, 50);
-    // };
+    const animateExpand = (commonPrefix: string, expandText: string) => {
+        let currentIndex = 0;
+        const intervalId = setInterval(() => {
+            setDisplayText(() => {
+                if (currentIndex >= expandText.length) {
+                    clearInterval(intervalId);
+                    setPrevChild(commonPrefix + expandText);
+                    return commonPrefix + expandText;
+                }
+                currentIndex++;
+                return commonPrefix + expandText.slice(0, currentIndex);
+            });
+        }, 50);
+    };
 
-    // return <>{displayText}</>;
-    return <>{nextChild}</>;
+    return <>{displayText}</>;
 };
 
-// const getCommonPrefix = (str1: string, str2: string): string => {
-//     let i = 0;
-//     while (i < str1.length && i < str2.length && str1[i] === str2[i]) {
-//         i++;
-//     }
-//     return str1.slice(0, i);
-// };
+const getCommonPrefix = (str1: string, str2: string): string => {
+    let i = 0;
+    while (i < str1.length && i < str2.length && str1[i] === str2[i]) {
+        i++;
+    }
+    return str1.slice(0, i);
+};
diff --git a/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx b/packages/ui/app/src/api-page/endpoints/EndpointContent.tsx
@@ -28,7 +28,6 @@ import {
 import { ApiPageDescription } from "../ApiPageDescription";
 import { JsonPropertyPath } from "../examples/JsonPropertyPath";
 import { CodeExample, generateCodeExamples } from "../examples/code-example";
-import { AnimatedTitle } from "./AnimatedTitle";
 import { EndpointAvailabilityTag } from "./EndpointAvailabilityTag";
 import { EndpointContentLeft, convertNameToAnchorPart } from "./EndpointContentLeft";
 import { EndpointStreamingEnabledToggle } from "./EndpointStreamingEnabledToggle";
@@ -279,7 +278,8 @@ const UnmemoizedEndpointContent: React.FC<EndpointContent.Props> = ({
                     <div className="flex items-center justify-between">
                         <span>
                             <h1 className="fern-page-heading">
-                                <AnimatedTitle>{endpoint.title}</AnimatedTitle>
+                                {/* <AnimatedTitle>{endpoint.title}</AnimatedTitle> */}
+                                {endpoint.title}
                             </h1>
                             {endpoint.availability != null && (
                                 <span className="inline-block ml-2 align-text-bottom">