diff --git a/frontend-client/app/problem/[id]/_components/DescriptionLoading.tsx b/frontend-client/app/problem/[id]/_components/DescriptionLoading.tsx
index a366cc9544..60f1f09f0e 100644
--- a/frontend-client/app/problem/[id]/_components/DescriptionLoading.tsx
+++ b/frontend-client/app/problem/[id]/_components/DescriptionLoading.tsx
@@ -1,4 +1,4 @@
-import Skeleton from '@/components/ui/skeleton'
+import { Skeleton } from '@/components/ui/skeleton'
 
 export default function DescriptionLoading() {
   return (
diff --git a/frontend-client/components/ui/skeleton.tsx b/frontend-client/components/ui/skeleton.tsx
index 08935c4fe7..71cb01cd15 100644
--- a/frontend-client/components/ui/skeleton.tsx
+++ b/frontend-client/components/ui/skeleton.tsx
@@ -1,9 +1,9 @@
 import { cn } from '@/lib/utils'
 
-export default function Skeleton({
+const Skeleton = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+}: React.HTMLAttributes<HTMLDivElement>) => {
   return (
     <div
       className={cn(
@@ -14,3 +14,5 @@ export default function Skeleton({
     />
   )
 }
+
+export { Skeleton }
diff --git a/frontend-client/lib/utils.ts b/frontend-client/lib/utils.ts
index f7b02ef513..3d081604ff 100644
--- a/frontend-client/lib/utils.ts
+++ b/frontend-client/lib/utils.ts
@@ -13,6 +13,17 @@ export const fetcher = ky.create({
   prefixUrl: baseUrl,
   throwHttpErrors: false,
   retry: 0,
+  timeout: 5000,
+  hooks: {
+    beforeError: [
+      (error) => {
+        if (error instanceof TimeoutError) {
+          toast.error('Request timed out. Please try again later.')
+        }
+        return error
+      }
+    ]
+  },
   next: {
     revalidate: 10 // 10 seconds
   }