do scroll restoration in userland. lol. fucking lmao

Author: david-crespo

app/hooks/use-scroll-restoration.ts

@@ -0,0 +1,15 @@
+import { useEffect, useRef } from 'react'
+import { useLocation, useNavigation } from 'react-router-dom'
+
+export function useScrollRestoration(elementRef: React.RefObject<HTMLElement>) {
+  const cache = useRef(new Map<string, number>())
+  const { key } = useLocation()
+  const { state } = useNavigation()
+  useEffect(() => {
+    if (state === 'loading') {
+      cache.current.set(key, elementRef.current?.scrollTop ?? 0)
+    } else if (state === 'idle' && cache.current.has(key)) {
+      elementRef.current?.scrollTo(0, cache.current.get(key)!)
+    }
+  }, [key, state, elementRef])
+}

app/layouts/helpers.tsx

@@ -1,20 +1,21 @@
 import { useRef } from 'react'
-import { Outlet, ScrollRestoration } from 'react-router-dom'
+import { Outlet } from 'react-router-dom'
 
 import { apiQueryClient } from '@oxide/api'
 import { Pagination } from '@oxide/pagination'
 import { SkipLinkTarget } from '@oxide/ui'
 import { classed } from '@oxide/util'
 
 import { PageActionsTarget } from 'app/components/PageActions'
+import { useScrollRestoration } from 'app/hooks/use-scroll-restoration'
 
 export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem,1fr] grid-rows-[60px,1fr]`
 
 export function ContentPane() {
   const ref = useRef<HTMLDivElement>(null)
+  useScrollRestoration(ref)
   return (
     <div ref={ref} className="flex flex-col overflow-auto">
-      <ScrollRestoration elementRef={ref} />
       <div className="flex flex-grow flex-col pb-8">
         <SkipLinkTarget />
         <main className="[&>*]:gutter">