fix: set isCancel flag to cancel async task in effect

Signed-off-by: Innei <tukon479@gmail.com>

src/components/common/Mermaid/index.tsx

@@ -3,7 +3,6 @@ import { memo, useEffect, useId, useState } from 'react'
 
 import { useAppStore } from '~/atoms/app'
 import { ImageLazy } from '~/components/ui/Image'
-import { useIsUnMounted } from '~/hooks/common/use-is-unmounted'
 
 export const Mermaid: FC<{
   content: string
@@ -13,7 +12,6 @@ export const Mermaid: FC<{
   const [svg, setSvg] = useState('')
   const [width, setWidth] = useState<number>()
   const [height, setHeight] = useState<number>()
-  const isUnmounted = useIsUnMounted()
 
   const isDark = useAppStore((state) => state.colorMode === 'dark')
 
@@ -35,6 +33,8 @@ export const Mermaid: FC<{
     setError('')
     setLoading(true)
 
+    let isCanceled = false
+
     import('mermaid').then(async (mo) => {
       const mermaid = mo.default
 
@@ -51,7 +51,7 @@ export const Mermaid: FC<{
         setHeight(undefined)
       }
 
-      if (isUnmounted.current) return
+      if (isCanceled) return
 
       if (result) {
         setSvg(result.svg)
@@ -64,6 +64,9 @@ export const Mermaid: FC<{
         setError('')
       }
       setLoading(false)
+      return () => {
+        isCanceled = true
+      }
     })
   }, [id, props.content])
 

src/components/in-page/Note/NoteTimelineList/index.tsx

@@ -18,7 +18,6 @@ import { MaterialSymbolsArrowCircleRightOutlineRounded } from '~/components/ui/I
 import { LeftToRightTransitionView } from '~/components/ui/Transition/LeftToRightTransitionView'
 import { TrackerAction } from '~/constants/tracker'
 import { useAnalyze } from '~/hooks/app/use-analyze'
-import { useIsUnMounted } from '~/hooks/common/use-is-unmounted'
 import { useDetectIsNarrowThanLaptop } from '~/hooks/ui/use-viewport'
 import { apiClient } from '~/utils/client'
 import { springScrollToTop } from '~/utils/spring'
@@ -71,27 +70,30 @@ const ObserveredNoteTimelineList: FC<
     ]
   })
 
-  const isUnmount = useIsUnMounted()
   useEffect(() => {
+    let isCanceled = false
     async function fetchList() {
       const scrollTop = document.documentElement.scrollTop
 
       if (scrollTop > 0)
         // waiting scroll to top
         await new Promise((resolve) => setTimeout(resolve, WAITING_SCROLL_TIME))
 
-      if (isUnmount.current) return
+      if (isCanceled) return
       const data = await apiClient.note
         .getMiddleList(noteId, 10)
         .then(({ data }) => {
           return data
         })
-      if (isUnmount.current) return
+      if (isCanceled) return
 
       setList(data)
     }
     fetchList()
     // eslint-disable-next-line react-hooks/exhaustive-deps
+    return () => {
+      isCanceled = true
+    }
   }, [noteId])
 
   const triggerComponent = useMemo(