Scroll in Consistency figure

Author: hasparus

src/components/index-page/graphql-advantages/consistency.tsx

@@ -13,7 +13,7 @@ const components = {
       // todo: this bg style might need to become global for all code blocks
       className={clsx(
         props.className,
-        "!bg-neu-0/[.48] backdrop-blur-[6px] max-xs:[&_span]:!text-xs",
+        "!bg-neu-0/[.48] backdrop-blur-[6px] [scrollbar-width:none] [&::-webkit-scrollbar]:size-0 max-xs:[&_span]:!text-xs",
       )}
       tabIndex={-1}
     />
@@ -27,25 +27,31 @@ export function ConsistencyFigure() {
     const [queryCode, responseCode] = queryRef.current!.querySelectorAll(
       "code",
     ) as unknown as HTMLElement[]
-    let line = 0
+    let i = 0
     const typeLines = [1, 5, 6, 5, 7, 12, 13, 8, 17, 18, 19, 12]
     const queryLines = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13]
-    let timer: any
+    let timer: ReturnType<typeof setTimeout> | undefined = undefined
 
     const highlightLine = () => {
       // Reset previous line
-      queryCode.children[queryLines.at(line - 1)!].classList.remove(
-        "highlighted",
-      )
-      responseCode.children[typeLines.at(line - 1)!].classList.remove(
+      queryCode.children[queryLines.at(i - 1)!].classList.remove("highlighted")
+      responseCode.children[typeLines.at(i - 1)!].classList.remove(
         "highlighted",
       )
 
-      // TODO: Whenever we're adding .highlighted, we should also ensure it's visible on screen.
-      // We can simplify this by scrolling to bottom in last 3 steps.
-      queryCode.children[queryLines.at(line)!].classList.add("highlighted")
-      responseCode.children[typeLines.at(line)!].classList.add("highlighted")
-      line = (line + 1) % typeLines.length
+      queryCode.children[queryLines.at(i)!].classList.add("highlighted")
+      responseCode.children[typeLines.at(i)!].classList.add("highlighted")
+
+      // We're scrolling to top when the first line is highlighted and we're
+      // scrolling to the  bottom when the last line is highlighted.
+      const pre = responseCode.parentElement!
+      if (i === 0) {
+        pre.scrollTo({ top: 0, behavior: "smooth" })
+      } else if (i === typeLines.length - 3) {
+        pre.scrollTo({ top: pre.scrollHeight, behavior: "smooth" })
+      }
+
+      i = (i + 1) % typeLines.length
 
       timer = setTimeout(highlightLine, 1_000 + Math.random() * 200)
     }

src/components/index-page/index.tsx

@@ -1,7 +1,6 @@
 import { Hero } from "./hero"
 import { TrustedBy } from "./trusted-by"
 import { SingleRequest } from "./single-request"
-import { WithoutVersion } from "./without-version"
 import { BringYourOwnCode } from "./bring-your-own-code"
 import { WhoIsUsing } from "./who-is-using"
 import { HowItWorks } from "./how-it-works"
@@ -31,7 +30,6 @@ export function IndexPage() {
         </p>
       </section>
       <SingleRequest />
-      <WithoutVersion />
       <BringYourOwnCode />
       <WhoIsUsing />
     </div>