refactor(FE): Refactor table skeleton components for consistency

src/components/pages/marketing/MarketingTable.tsx

@@ -31,6 +31,7 @@ import PopoverContent from '@/components/popover/PopoverContent';
 import StatusBadge from '@/components/helper/StatusBadge';
 import MarketingFilterModal from '@/components/pages/marketing/MarketingFilter';
 import ButtonFilter from '@/components/helper/ButtonFilter';
+import MarketingTableSkeleton from '@/components/pages/marketing/skeleton/MarketingTableSkeleton';
 
 const RowsOptionsMenu = ({
   props,
@@ -616,28 +617,49 @@ const MarketingTable = () => {
             </Dropdown>
           </div>
         </div>
-        <Table
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
-          onPageChange={setPage}
-          onPageSizeChange={setPageSize}
-          data={allData}
-          columns={columns}
-          pageSize={tableFilterState.pageSize}
-          page={isResponseSuccess(marketing) ? marketing?.meta?.page : 1}
-          totalItems={
-            isResponseSuccess(marketing) ? marketing?.meta?.total_results : 0
-          }
-          isLoading={isLoadingMarketing}
-          className={{
-            containerClassName: cn('p-3', {
-              'w-full mb-20':
-                isResponseSuccess(marketing) && marketing?.data?.length === 0,
-            }),
-            bodyColumnClassName:
-              'last:text-end last:w-17 first:text-start first:w-5',
-          }}
-        />
+        <div className='flex flex-col mb-4'>
+          {isLoadingMarketing ? (
+            <div className='w-full flex flex-row justify-center items-center p-4'>
+              <span className='loading loading-spinner loading-xl' />
+            </div>
+          ) : !isResponseSuccess(marketing) || marketing.data?.length === 0 ? (
+            <div className='p-3'>
+              <MarketingTableSkeleton
+                columns={columns}
+                icon={
+                  <Icon
+                    icon='heroicons:document-text'
+                    className='text-white'
+                    width={20}
+                    height={20}
+                  />
+                }
+              />
+            </div>
+          ) : (
+            <Table
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              onPageChange={setPage}
+              onPageSizeChange={setPageSize}
+              data={allData}
+              columns={columns}
+              pageSize={tableFilterState.pageSize}
+              page={isResponseSuccess(marketing) ? marketing?.meta?.page : 1}
+              totalItems={
+                isResponseSuccess(marketing)
+                  ? marketing?.meta?.total_results
+                  : 0
+              }
+              isLoading={isLoadingMarketing}
+              className={{
+                containerClassName: cn('p-3 mb-0'),
+                bodyColumnClassName:
+                  'last:text-end last:w-17 first:text-start first:w-5',
+              }}
+            />
+          )}
+        </div>
       </div>
       <ConfirmationModal
         ref={deleteModal.ref}

src/components/pages/marketing/skeleton/MarketingTableSkeleton.tsx

@@ -0,0 +1,37 @@
+import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
+import Table from '@/components/Table';
+import { Marketing } from '@/types/api/marketing/marketing';
+import { ColumnDef } from '@tanstack/react-table';
+
+const MarketingTableSkeleton = ({
+  columns,
+  icon,
+  title = 'No Data Available',
+  subtitle = 'There is no marketing data displayed. Enter marketing data to get started.',
+}: {
+  columns: ColumnDef<Marketing>[];
+  icon: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+}) => {
+  return (
+    <div className='relative size-full'>
+      <Table
+        data={[]}
+        columns={columns}
+        isLoading={true}
+        className={{
+          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
+          headerColumnClassName: 'whitespace-nowrap',
+          containerClassName: 'mb-0 overflow-hidden',
+          tableWrapperClassName: 'overflow-hidden',
+        }}
+      />
+      <div className='absolute inset-0 flex items-center justify-center'>
+        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
+      </div>
+    </div>
+  );
+};
+
+export default MarketingTableSkeleton;