Guard block detail fetch state

frontend/src/pages/blocks/[number].tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
 import { blocksApi, Block } from '@/services/api/blocks'
 import { Card, Address, Table } from '@/libs/frontend-ui-primitives'
@@ -34,19 +34,6 @@ export default function BlockDetailPage() {
     enabled: router.isReady && isValidBlock,
   })
 
-  const loadBlock = useCallback(async () => {
-    setLoading(true)
-    try {
-      const response = await blocksApi.getByNumber(chainId, blockNumber)
-      setBlock(response.data)
-    } catch (error) {
-      console.error('Failed to load block:', error)
-      setBlock(null)
-    } finally {
-      setLoading(false)
-    }
-  }, [chainId, blockNumber])
-
   useEffect(() => {
     if (!router.isReady) {
       return
@@ -56,8 +43,34 @@ export default function BlockDetailPage() {
       setBlock(null)
       return
     }
-    void loadBlock()
+
-  }, [isValidBlock, loadBlock, router.isReady])
+    let cancelled = false
+    setLoading(true)
+
+    void (async () => {
+      try {
+        const response = await blocksApi.getByNumber(chainId, blockNumber)
+        if (cancelled) {
+          return
+        }
+        setBlock(response.data)
+      } catch (error) {
+        console.error('Failed to load block:', error)
+        if (cancelled) {
+          return
+        }
+        setBlock(null)
+      } finally {
+        if (!cancelled) {
+          setLoading(false)
+        }
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [blockNumber, chainId, isValidBlock, router.isReady])
 
   const gasUtilization = block && block.gas_limit > 0
     ? Math.round((block.gas_used / block.gas_limit) * 100)