Add route change loading bar

Author: youngkidwarrior

packages/app/features/home/layout.web.tsx

@@ -1,9 +1,10 @@
-import { Container, ScrollView, type ScrollViewProps, YStack } from '@my/ui'
+import { Container, ScrollView, type ScrollViewProps, YStack, PendingIndicatorBar } from '@my/ui'
 import { HomeSideBarWrapper } from 'app/components/sidebar/HomeSideBar'
 import { TagSearchProvider } from 'app/provider/tag-search'
 import { useScrollDirection } from 'app/provider/scroll'
 import { BOTTOM_NAV_BAR_HEIGHT } from 'app/components/BottomTabBar/BottomNavBar'
 import { BottomNavBarWrapper } from 'app/components/BottomTabBar/BottomNavBarWrapper'
+import { useRouteChange } from 'app/routers/useRouteChange.web'
 
 export function HomeLayout({
   children,
@@ -15,11 +16,13 @@ export function HomeLayout({
   TopNav?: React.ReactNode
 } & ScrollViewProps & { fullHeight?: boolean }) {
   const { onScroll, onContentSizeChange, ref } = useScrollDirection()
+  const isPending = useRouteChange()
 
   return (
     <HomeSideBarWrapper>
       <BottomNavBarWrapper>
         <TagSearchProvider>
+          <PendingIndicatorBar pending={isPending} />
           <ScrollView
             ref={ref}
             mih="100%"

packages/app/routers/useRouteChange.web.ts

@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+export const useRouteChange = () => {
+  const router = useRouter()
+  const [isRouteChanging, setIsRouteChanging] = useState(false)
+
+  useEffect(() => {
+    const handleStart = () => {
+      setIsRouteChanging(true)
+    }
+
+    const handleComplete = () => {
+      setIsRouteChanging(false)
+    }
+
+    router.events.on('routeChangeStart', handleStart)
+    router.events.on('routeChangeComplete', handleComplete)
+    router.events.on('routeChangeError', handleComplete)
+
+    return () => {
+      router.events.off('routeChangeStart', handleStart)
+      router.events.off('routeChangeComplete', handleComplete)
+      router.events.off('routeChangeError', handleComplete)
+    }
+  }, [router])
+
+  return isRouteChanging
+}

packages/ui/src/components/PendingIndicatorBar.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react'
+import { Stack } from 'tamagui'
+
+const getTimeout = (progress: number): number => {
+  if (progress < 0.7) {
+    return 0
+  }
+  if (progress < 0.8) {
+    return 800
+  }
+  if (progress < 0.95) {
+    return 1000
+  }
+  return 1500
+}
+
+const LoadingBar = ({ visible }: { visible: boolean }) => {
+  const [render, setRender] = useState(visible)
+  const [progress, setProgress] = useState(0)
+
+  const translate = 100 - progress * 100
+
+  useEffect(() => {
+    if (render) {
+      const timeoutId = setTimeout(() => {
+        setProgress((currentProgress) => {
+          if (currentProgress < 0.7) {
+            return currentProgress + 0.7
+          }
+          if (currentProgress < 0.8) {
+            return currentProgress + 0.05
+          }
+          if (currentProgress < 0.95) {
+            return currentProgress + 0.025
+          }
+          return currentProgress + 0.005
+        })
+      }, getTimeout(progress))
+      return () => clearTimeout(timeoutId)
+    }
+  }, [progress, render])
+
+  useEffect(() => {
+    if (!visible) {
+      const renderTimeoutId = setTimeout(() => {
+        setRender(false)
+      }, 200)
+      const progressTimeoutId = setTimeout(() => {
+        setProgress(0)
+      }, 500)
+
+      setProgress(1)
+      return () => {
+        clearTimeout(renderTimeoutId)
+        clearTimeout(progressTimeoutId)
+      }
+    }
+
+    const timeoutId = setTimeout(() => {
+      setProgress(0)
+      setRender(true)
+    }, 300)
+
+    return () => clearTimeout(timeoutId)
+  }, [visible])
+
+  return (
+    <Stack w="100%" h="$0.5" overflow="hidden" position="relative">
+      <Stack
+        position="absolute"
+        top={0}
+        left={0}
+        bottom={0}
+        width="100%"
+        bc="$primary"
+        opacity={!render || (render && progress === 0) ? 0 : 1}
+        style={{ transform: `translateX(-${translate}%)` }}
+      />
+    </Stack>
+  )
+}
+
+export const PendingIndicatorBar = ({ pending }: { pending: boolean }) => (
+  <Stack position="absolute" left={0} top={0} w="100%" pointerEvents="none" zIndex={20}>
+    <LoadingBar visible={pending} />
+  </Stack>
+)

packages/ui/src/components/index.ts

@@ -20,3 +20,4 @@ export * from './SafeArea'
 export * from './FadeCard'
 export * from './LinkBanner'
 export { RecyclerList } from './RecyclerList.web'
+export * from './PendingIndicatorBar'