diff --git a/components/form/field/Typeahead.tsx b/components/form/field/Typeahead.tsx
index 7a21077..3f416b7 100644
--- a/components/form/field/Typeahead.tsx
+++ b/components/form/field/Typeahead.tsx
@@ -513,6 +513,7 @@ export const Typeahead: FC<{
               resetSearch();
             }
           }}
+          loading={local.loading}
           showEmpty={!allow_new}
           className={popupClassName}
           open={local.open}
diff --git a/components/form/field/typeahead-opt.tsx b/components/form/field/typeahead-opt.tsx
index 1813172..6ac28b8 100644
--- a/components/form/field/typeahead-opt.tsx
+++ b/components/form/field/typeahead-opt.tsx
@@ -6,6 +6,7 @@ import { ButtonBetter } from "../../ui/button";
 export type OptionItem = { value: string; label: string };
 export const TypeaheadOptions: FC<{
   popup?: boolean;
+  loading?: boolean;
   open?: boolean;
   children: any;
   onOpenChange?: (open: boolean) => void;
@@ -25,6 +26,7 @@ export const TypeaheadOptions: FC<{
   fitur?: "search-add";
 }> = ({
   popup,
+  loading,
   children,
   open,
   onOpenChange,
@@ -61,33 +63,41 @@ export const TypeaheadOptions: FC<{
         `
       )}
     >
-      {options.map((item, idx) => {
-        const is_selected = selected?.({ item, options, idx });
+      {!loading ? (
+        <>
+          {options.map((item, idx) => {
+            const is_selected = selected?.({ item, options, idx });
 
-        if (is_selected) {
-          local.selectedIdx = idx;
-        }
+            if (is_selected) {
+              local.selectedIdx = idx;
+            }
 
-        return (
-          <div
-            tabIndex={0}
-            key={item.value + "_" + idx}
-            className={cx(
-              "opt-item px-3 py-1 cursor-pointer option-item text-sm",
-              is_selected ? "bg-blue-600 text-white" : "hover:bg-blue-50",
-              idx > 0 && "border-t"
-            )}
-            onClick={() => {
-              onSelect?.(item.value);
-            }}
-          >
-            {item.label || <>&nbsp;</>}
-          </div>
-        );
-      })}
+            return (
+              <div
+                tabIndex={0}
+                key={item.value + "_" + idx}
+                className={cx(
+                  "opt-item px-3 py-1 cursor-pointer option-item text-sm",
+                  is_selected ? "bg-blue-600 text-white" : "hover:bg-blue-50",
+                  idx > 0 && "border-t"
+                )}
+                onClick={() => {
+                  onSelect?.(item.value);
+                }}
+              >
+                {item.label || <>&nbsp;</>}
+              </div>
+            );
+          })}
+        </>
+      ) : (
+        <></>
+      )}
 
-      {searching ? (
-        <div className="px-4 w-full text-slate-400">Loading...</div>
+      {loading || searching ? (
+        <div className="px-4 w-full text-slate-400 text-sm py-2">
+          Loading...
+        </div>
       ) : (
         <>
           {options.length === 0 && (
diff --git a/utils/axios.ts b/utils/axios.ts
index ed24866..46d65f9 100644
--- a/utils/axios.ts
+++ b/utils/axios.ts
@@ -1,12 +1,12 @@
 import axios from "axios";
 import Cookies from "js-cookie";
-import dotenv from 'dotenv';
+import dotenv from "dotenv";
 
 dotenv.config();
 // Buat instance Axios
 const api = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.example.com", // Ganti dengan URL API Anda
-  timeout: 10000, // Timeout dalam milidetik
+  timeout: 60000, // Timeout dalam milidetik
   withCredentials: true, // Kirim cookie otomatis dengan setiap permintaan
 });
 // Interceptor untuk menambahkan token dari cookie ke header Authorization (jika diperlukan)