attempt at improving & optimizing autoscrollQ

Author: Veikkosuhonen

src/client/hooks/useChatScroll.ts

@@ -1,24 +1,42 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState, useTransition } from 'react'
 
 let isUserDisabled = false
 
 export const useChatScroll = () => {
   // Todo: on long conversations this state update is not optimal. Ideally move it down the component tree.
   const [isAutoScrolling, setIsAutoScrolling] = useState(false)
 
+  const prevHeight = useRef(0)
+
+  const [transitionPending, startTransition] = useTransition()
+
   const autoScroll = () => {
-    if (isUserDisabled) return
+    if (isUserDisabled || transitionPending) {
+      console.log('skipped', isUserDisabled, transitionPending)
+      return
+    }
 
-    window.scrollTo({
-      top: document.body.scrollHeight,
-    })
+    const heightDiff = document.body.scrollHeight - prevHeight.current
+
+    if (heightDiff > 0) {
+      startTransition(() => {
+        window.scrollTo({
+          top: document.body.scrollHeight,
+          behavior: 'instant',
+        })
+        prevHeight.current = document.body.scrollHeight
+      })
+    }
   }
 
   const beginAutoscroll = () => {
-    isUserDisabled = false
-    setIsAutoScrolling(true)
-    window.scrollTo({
-      top: document.body.scrollHeight,
+    startTransition(() => {
+      isUserDisabled = false
+      setIsAutoScrolling(true)
+      window.scrollTo({
+        top: document.body.scrollHeight,
+        behavior: 'smooth',
+      })
     })
   }
 

src/client/stores/analytics.tsx

@@ -17,7 +17,6 @@ type AnalyticsAction =
 const initialFeedbackMetadata: FeedbackMetadata = {}
 
 function analyticsReducer(state: FeedbackMetadata, action: AnalyticsAction): FeedbackMetadata {
-  console.log('analyticsReducer', action)
   switch (action.type) {
     case 'SET_ANALYTICS_DATA':
       return {