refactor: refactor layout components to use SuspenseHelper for loading states

src/app/master-data/area/detail/layout.tsx

@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
+const Layout = ({
-
-export default function AreaLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) => {
-  return (
+  return <SuspenseHelper>{children}</SuspenseHelper>;
-    <Suspense
+};
-      fallback={
+
-        <div className='w-full flex flex-row justify-center items-center p-4'>
+export default Layout;
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}

src/app/master-data/kandang/detail/layout.tsx

@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
+const Layout = ({
-
-export default function KandangLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) => {
-  return (
+  return <SuspenseHelper>{children}</SuspenseHelper>;
-    <Suspense
+};
-      fallback={
+
-        <div className='w-full flex flex-row justify-center items-center p-4'>
+export default Layout;
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}

src/app/master-data/location/detail/layout.tsx

@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
+const Layout = ({
-
-export default function LocationLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) => {
-  return (
+  return <SuspenseHelper>{children}</SuspenseHelper>;
-    <Suspense
+};
-      fallback={
+
-        <div className='w-full flex flex-row justify-center items-center p-4'>
+export default Layout;
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}

src/app/master-data/nonstock/detail/layout.tsx

@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
+const Layout = ({
-
-export default function NonstockLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) => {
-  return (
+  return <SuspenseHelper>{children}</SuspenseHelper>;
-    <Suspense
+};
-      fallback={
+
-        <div className='w-full flex flex-row justify-center items-center p-4'>
+export default Layout;
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}

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';
+const Layout = ({
-
-export default function ProductCategoryLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) => {
-  return (
+  return <SuspenseHelper>{children}</SuspenseHelper>;
-    <Suspense
+};
-      fallback={
+
-        <div className='w-full flex flex-row justify-center items-center p-4'>
+export default Layout;
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}

src/app/master-data/product/detail/layout.tsx

@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
+const Layout = ({
-
-export default function ProductLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) => {
-  return (
+  return <SuspenseHelper>{children}</SuspenseHelper>;
-    <Suspense
+};
-      fallback={
+
-        <div className='w-full flex flex-row justify-center items-center p-4'>
+export default Layout;
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}

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 }) {
+export default Layout;
-  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>
-  );
-}

src/app/master-data/warehouse/detail/layout.tsx

@@ -1,21 +1,11 @@
-'use client';
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
 
-import { Suspense } from 'react';
+const Layout = ({
-
-export default function WarehouseLayout({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) => {
-  return (
+  return <SuspenseHelper>{children}</SuspenseHelper>;
-    <Suspense
+};
-      fallback={
+
-        <div className='w-full flex flex-row justify-center items-center p-4'>
+export default Layout;
-          <span className='loading loading-spinner loading-xl' />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}

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;