diff --git a/src/app/master-data/area/detail/layout.tsx b/src/app/master-data/area/detail/layout.tsx
index 6a7b249d..7220dfa1 100644
--- a/src/app/master-data/area/detail/layout.tsx
+++ b/src/app/master-data/area/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function AreaLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/kandang/detail/layout.tsx b/src/app/master-data/kandang/detail/layout.tsx
index f3c8c490..7220dfa1 100644
--- a/src/app/master-data/kandang/detail/layout.tsx
+++ b/src/app/master-data/kandang/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function KandangLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/location/detail/layout.tsx b/src/app/master-data/location/detail/layout.tsx
index fbe0ff69..7220dfa1 100644
--- a/src/app/master-data/location/detail/layout.tsx
+++ b/src/app/master-data/location/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function LocationLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/nonstock/detail/layout.tsx b/src/app/master-data/nonstock/detail/layout.tsx
index aa0d1116..7220dfa1 100644
--- a/src/app/master-data/nonstock/detail/layout.tsx
+++ b/src/app/master-data/nonstock/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function NonstockLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/product-category/detail/layout.tsx b/src/app/master-data/product-category/detail/layout.tsx
index 76235398..7220dfa1 100644
--- a/src/app/master-data/product-category/detail/layout.tsx
+++ b/src/app/master-data/product-category/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function ProductCategoryLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/product/detail/layout.tsx b/src/app/master-data/product/detail/layout.tsx
index 5a91b249..7220dfa1 100644
--- a/src/app/master-data/product/detail/layout.tsx
+++ b/src/app/master-data/product/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function ProductLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/app/master-data/uom/detail/layout.tsx b/src/app/master-data/uom/detail/layout.tsx
index 1938ec61..7220dfa1 100644
--- a/src/app/master-data/uom/detail/layout.tsx
+++ b/src/app/master-data/uom/detail/layout.tsx
@@ -1,17 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
+const Layout = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
 
-export default function UomLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+export default Layout;
diff --git a/src/app/master-data/warehouse/detail/layout.tsx b/src/app/master-data/warehouse/detail/layout.tsx
index 6b78cf39..7220dfa1 100644
--- a/src/app/master-data/warehouse/detail/layout.tsx
+++ b/src/app/master-data/warehouse/detail/layout.tsx
@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
-
-export default function WarehouseLayout({
+const Layout = ({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
-  return (
-    <Suspense
-      fallback={
-        <div className='w-full flex flex-row justify-center items-center p-4'>
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
+}>) => {
+  return <SuspenseHelper>{children}</SuspenseHelper>;
+};
+
+export default Layout;
diff --git a/src/components/helper/SuspenseHelper.tsx b/src/components/helper/SuspenseHelper.tsx
new file mode 100644
index 00000000..a151cd9d
--- /dev/null
+++ b/src/components/helper/SuspenseHelper.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { Suspense } from 'react';
+
+const SuspenseHelper = ({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) => {
+  return (
+    <Suspense
+      fallback={
+        <div className='w-full flex flex-row justify-center items-center p-4'>
+          <span className='loading loading-spinner loading-xl' />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+};
+
+export default SuspenseHelper;