From f0eabedcb2dadb46ca086576c9811694ee9495a9 Mon Sep 17 00:00:00 2001 From: rstubryan Date: Thu, 9 Oct 2025 11:06:59 +0700 Subject: [PATCH] refactor: refactor layout components to use SuspenseHelper for loading states --- src/app/master-data/area/detail/layout.tsx | 26 ++++++------------- src/app/master-data/kandang/detail/layout.tsx | 26 ++++++------------- .../master-data/location/detail/layout.tsx | 26 ++++++------------- .../master-data/nonstock/detail/layout.tsx | 26 ++++++------------- .../product-category/detail/layout.tsx | 26 ++++++------------- src/app/master-data/product/detail/layout.tsx | 26 ++++++------------- src/app/master-data/uom/detail/layout.tsx | 24 +++++++---------- .../master-data/warehouse/detail/layout.tsx | 26 ++++++------------- src/components/helper/SuspenseHelper.tsx | 23 ++++++++++++++++ 9 files changed, 88 insertions(+), 141 deletions(-) create mode 100644 src/components/helper/SuspenseHelper.tsx 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 ( - - - - } - > - {children} - - ); -} +}>) => { + return {children}; +}; + +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 ( - - - - } - > - {children} - - ); -} +}>) => { + return {children}; +}; + +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 ( - - - - } - > - {children} - - ); -} +}>) => { + return {children}; +}; + +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 ( - - - - } - > - {children} - - ); -} +}>) => { + return {children}; +}; + +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 ( - - - - } - > - {children} - - ); -} +}>) => { + return {children}; +}; + +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 ( - - - - } - > - {children} - - ); -} +}>) => { + return {children}; +}; + +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 {children}; +}; -export default function UomLayout({ children }: { children: React.ReactNode }) { - return ( - - - - } - > - {children} - - ); -} +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 ( - - - - } - > - {children} - - ); -} +}>) => { + return {children}; +}; + +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 ( + + + + } + > + {children} + + ); +}; + +export default SuspenseHelper;