fix: add fetchWithTimeout

pages/[...slug].tsx

@@ -8,6 +8,7 @@ import { useLocalStorage } from "react-use";
 import Footer from "../components/Footer";
 import Header from "../components/Header";
 import SquigglyLines from "../components/SquigglyLines";
+import { fetchWithTimeout } from "../utils/fetchWithTimeout";
 
 export const Home: NextPage = () => {
   const router = useRouter();
@@ -49,7 +50,7 @@ export const Home: NextPage = () => {
       router.replace(curUrl);
     }
     setLoading(true);
-    const response = await fetch("/api/summarize", {
+    const response = await fetchWithTimeout("/api/summarize", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

utils/fetchWithTimeout.ts

@@ -0,0 +1,20 @@
+interface Options extends RequestInit {
+  /** timeout, default: 8000ms */
+  timeout?: number
+}
+
+export async function fetchWithTimeout(
+  resource: RequestInfo | URL,
+  options: Options = {}
+) {
+  const { timeout } = options
+
+  const controller = new AbortController()
+  const id = setTimeout(() => controller.abort(), timeout)
+  const response = await fetch(resource, {
+    ...options,
+    signal: controller.signal
+  })
+  clearTimeout(id)
+  return response
+}