Release v1.14.1

app/(main)/(auth)/applications/[id]/loading.tsx

@@ -1,26 +1,19 @@
 import { AnswersCardSkeleton } from '@/components/features/application-answers-skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
 import { Skeleton } from '@/components/ui/skeleton';
 
 export default function MyApplicationDetailLoading() {
   return (
     <div className="mx-auto max-w-5xl">
       <div className="mb-4">
-        {/* Back link skeleton */}
-        <Skeleton className="mb-2 h-7 w-48" />
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <Skeleton className="h-8 w-48" />
-              <Skeleton className="h-5 w-20 rounded-md" />
-            </div>
-            <Skeleton className="h-4 w-56" />
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Skeleton className="h-9 w-20" />
-            <Skeleton className="h-9 w-20" />
-          </div>
-        </div>
-        <Skeleton className="mt-3 h-4 w-56" />
+        <PageHeaderSkeleton
+          titleWidth="w-48"
+          hasBack
+          hasAdornment
+          actionSize="sm"
+          actions={['w-32', 'w-9']}
+        />
+        <Skeleton className="mt-1 h-5 w-56" />
       </div>
 
       <div className="flex flex-col gap-4">

app/(main)/(auth)/applications/loading.tsx

@@ -1,50 +1,21 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import {
+  DataTableSkeleton,
+  type DataTableSkeletonColumn,
+} from '@/components/ui/data-table-skeleton';
+
+const COLUMNS: DataTableSkeletonColumn[] = [
+  { head: 'w-20', cell: 'w-40', mobile: 'primary' },
+  { head: 'w-16', shape: 'badge', mobile: 'trailing' },
+  { head: 'w-24', mobile: 'line' },
+  { head: 'w-16', shape: 'action', cell: 'w-20', mobile: 'lineTrailing' },
+];
 
 export default function MyApplicationsLoading() {
   return (
     <div className="flex w-full flex-col gap-6">
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-8 w-48" />
-        <Skeleton className="h-4 w-72" />
-      </div>
-
-      <Card className="gap-0 overflow-hidden p-0">
-        <CardContent className="p-0">
-          <div className="hidden md:block">
-            <div className="flex h-10 items-center gap-4 border-b px-4">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <Skeleton key={i} className="h-4 w-20" />
-              ))}
-            </div>
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="border-b p-4 last:border-0">
-                <div className="grid grid-cols-4 gap-4">
-                  <Skeleton className="h-4 w-32" />
-                  <Skeleton className="h-5 w-20 rounded-md" />
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-8 w-20 rounded-md" />
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex flex-col divide-y md:hidden">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="flex flex-col gap-2 p-4">
-                <div className="flex items-center justify-between gap-2">
-                  <Skeleton className="h-4 w-40" />
-                  <Skeleton className="h-5 w-16 rounded-md" />
-                </div>
-                <div className="flex items-center justify-between gap-2">
-                  <Skeleton className="h-4 w-24" />
-                  <Skeleton className="h-8 w-20 rounded-md" />
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+      <PageHeaderSkeleton titleWidth="w-48" />
+      <DataTableSkeleton columns={COLUMNS} />
     </div>
   );
 }

app/(main)/(auth)/emails/loading.tsx

@@ -1,37 +1,17 @@
 import { EmailFailureStripSkeleton } from '@/components/features/email-failure-strip';
-import { EmailLogTableSkeleton } from '@/components/features/email-log-table-skeleton';
+import { EmailLogResultsSkeleton } from '@/components/features/email-log-results';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import { DataTableToolbarSkeleton } from '@/components/ui/data-table-toolbar';
 import { Skeleton } from '@/components/ui/skeleton';
 
 export default function EmailsLoading() {
   return (
     <div className="flex flex-col gap-6">
-      {/* Header skeleton */}
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-7 w-32" />
-        <Skeleton className="h-4 w-80" />
-      </div>
-
+      <PageHeaderSkeleton titleWidth="w-32" />
       <EmailFailureStripSkeleton />
-
-      {/* Toolbar skeleton — Status Select + Template Select + Search Input */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
-        <div className="flex w-full flex-col gap-1.5 sm:w-44">
-          <Skeleton className="h-3 w-10" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-52">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-64">
-          <Skeleton className="h-3 w-12" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-      </div>
-
-      <Skeleton className="h-4 w-full max-w-md" />
-
-      <EmailLogTableSkeleton />
+      <DataTableToolbarSkeleton fields={['sm:w-44', 'sm:w-52', 'sm:w-64']} />
+      <Skeleton className="h-5 w-full max-w-md" />
+      <EmailLogResultsSkeleton />
     </div>
   );
 }

app/(main)/(auth)/emails/page.tsx

@@ -12,8 +12,10 @@ import {
   EmailFailureStrip,
   EmailFailureStripSkeleton,
 } from '@/components/features/email-failure-strip';
-import { EmailLogResults } from '@/components/features/email-log-results';
-import { EmailLogTableSkeleton } from '@/components/features/email-log-table-skeleton';
+import {
+  EmailLogResults,
+  EmailLogResultsSkeleton,
+} from '@/components/features/email-log-results';
 import { EmailLogToolbar } from '@/components/features/email-log-toolbar';
 import { PageHeader } from '@/components/layouts/page-header';
 
@@ -66,7 +68,7 @@ export default async function EmailsPage({ searchParams }: EmailsPageProps) {
 
       <Suspense
         key={JSON.stringify({ ...filters, page })}
-        fallback={<EmailLogTableSkeleton />}
+        fallback={<EmailLogResultsSkeleton />}
       >
         <EmailLogResults
           filters={filters}

app/(main)/(auth)/global-questions/loading.tsx

@@ -1,67 +1,39 @@
-import { Card, CardContent } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import {
+  DataTableSkeleton,
+  type DataTableSkeletonColumn,
+} from '@/components/ui/data-table-skeleton';
+
+const COLUMNS: DataTableSkeletonColumn[] = [
+  { head: 'w-12', cell: 'w-8', headClassName: 'w-12 px-2', mobile: 'line' },
+  { head: 'w-24', cell: 'w-56', mobile: 'primary' },
+  { head: 'w-24', headClassName: 'w-36', shape: 'badge', mobile: 'trailing' },
+  { head: 'w-24', cell: 'w-24', mobile: 'hidden' },
+  {
+    head: 'w-20',
+    headClassName: 'w-28',
+    shape: 'badge',
+    mobile: 'lineTrailing',
+  },
+  {
+    head: 'w-24',
+    headClassName: 'w-32',
+    shape: 'action',
+    cell: 'w-20',
+    mobile: 'line',
+  },
+];
 
 export default function GlobalQuestionsLoading() {
   return (
     <div className="flex flex-col gap-6">
-      {/* PageHeader skeleton */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-8 w-48" />
-          <Skeleton className="h-4 w-80" />
-        </div>
-        <Skeleton className="h-8 w-28 shrink-0" />
-      </div>
-
-      {/* Table skeleton */}
-      <Card className="gap-0 overflow-hidden p-0">
-        <CardContent className="p-0">
-          <div className="hidden md:block">
-            <div className="flex h-10 items-center gap-8 border-b px-4">
-              <Skeleton className="h-4 w-12" />
-              <Skeleton className="h-4 w-24" />
-              <Skeleton className="h-4 w-16" />
-              <Skeleton className="h-4 w-16" />
-              <Skeleton className="h-4 w-20" />
-            </div>
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div
-                key={i}
-                className="flex items-center gap-4 border-b p-4 last:border-b-0"
-              >
-                <Skeleton className="h-4 w-8" />
-                <Skeleton className="h-4 flex-1" />
-                <Skeleton className="h-6 w-24" />
-                <Skeleton className="h-4 w-16" />
-                <Skeleton className="h-6 w-20" />
-                <div className="flex gap-2">
-                  <Skeleton className="h-8 w-12" />
-                  <Skeleton className="h-8 w-16" />
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div className="flex flex-col divide-y md:hidden">
-            {Array.from({ length: 3 }).map((_, i) => (
-              <div key={i} className="flex flex-col gap-3 p-4">
-                <div className="flex items-start justify-between gap-2">
-                  <Skeleton className="h-4 w-40" />
-                  <Skeleton className="h-6 w-24" />
-                </div>
-                <div className="flex items-center gap-2">
-                  <Skeleton className="h-3 w-16" />
-                  <Skeleton className="h-4 w-16" />
-                </div>
-                <div className="flex gap-2">
-                  <Skeleton className="h-8 w-12" />
-                  <Skeleton className="h-8 w-16" />
-                </div>
-              </div>
-            ))}
-          </div>
-        </CardContent>
-      </Card>
+      <PageHeaderSkeleton actions={['w-32']} actionSize="sm" />
+      <DataTableSkeleton
+        columns={COLUMNS}
+        hasReorderHandle
+        mobileGap="gap-3"
+        mobileRowGap="gap-0"
+      />
     </div>
   );
 }

app/(main)/(auth)/manage/applications/[id]/loading.tsx

@@ -1,27 +1,20 @@
 import { AnswersCardSkeleton } from '@/components/features/application-answers-skeleton';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
 import { SectionCardSkeleton } from '@/components/ui/section-card';
 import { Skeleton } from '@/components/ui/skeleton';
 
 export default function ApplicationDetailLoading() {
   return (
     <div className="mx-auto max-w-5xl">
       <div className="mb-4">
-        {/* Back link skeleton */}
-        <Skeleton className="mb-2 h-7 w-40" />
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <Skeleton className="h-8 w-40" />
-              <Skeleton className="h-5 w-20 rounded-md" />
-            </div>
-            <Skeleton className="h-4 w-56" />
-          </div>
-          <div className="flex flex-wrap gap-2">
-            <Skeleton className="h-9 w-40" />
-            <Skeleton className="h-9 w-9" />
-          </div>
-        </div>
-        <Skeleton className="mt-3 h-4 w-56" />
+        <PageHeaderSkeleton
+          titleWidth="w-40"
+          hasBack
+          hasAdornment
+          actionSize="sm"
+          actions={['w-40', 'w-9']}
+        />
+        <Skeleton className="mt-1 h-5 w-56" />
       </div>
 
       <div className="flex flex-col gap-4">

app/(main)/(auth)/manage/applications/loading.tsx

@@ -1,36 +1,15 @@
-import { ApplicationsTableSkeleton } from '@/components/features/applications-table-skeleton';
-import { Skeleton } from '@/components/ui/skeleton';
+import { ApplicationsResultsSkeleton } from '@/components/features/applications-results';
+import { PageHeaderSkeleton } from '@/components/layouts/page-header';
+import { DataTableToolbarSkeleton } from '@/components/ui/data-table-toolbar';
 
 export default function ApplicationsLoading() {
   return (
     <div className="flex flex-col gap-6">
-      {/* Header skeleton */}
-      <div className="flex flex-col gap-2">
-        <Skeleton className="h-7 w-36" />
-        <Skeleton className="h-4 w-64" />
-      </div>
-
-      {/* Toolbar skeleton — Position Select + Applicant Select + Status Select + Search Input */}
-      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-end">
-        <div className="flex w-full flex-col gap-1.5 sm:w-48">
-          <Skeleton className="h-3 w-14" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-56">
-          <Skeleton className="h-3 w-16" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-44">
-          <Skeleton className="h-3 w-10" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-        <div className="flex w-full flex-col gap-1.5 sm:w-64">
-          <Skeleton className="h-3 w-12" />
-          <Skeleton className="h-11 w-full md:h-9" />
-        </div>
-      </div>
-
-      <ApplicationsTableSkeleton />
+      <PageHeaderSkeleton titleWidth="w-36" />
+      <DataTableToolbarSkeleton
+        fields={['sm:w-48', 'sm:w-56', 'sm:w-44', 'sm:w-64']}
+      />
+      <ApplicationsResultsSkeleton />
     </div>
   );
 }

app/(main)/(auth)/manage/applications/page.tsx

@@ -16,8 +16,10 @@ import {
 } from '@/lib/constants';
 import type { ApplicationFilters } from '@/lib/types';
 
-import { ApplicationsResults } from '@/components/features/applications-results';
-import { ApplicationsTableSkeleton } from '@/components/features/applications-table-skeleton';
+import {
+  ApplicationsResults,
+  ApplicationsResultsSkeleton,
+} from '@/components/features/applications-results';
 import { ApplicationsToolbar } from '@/components/features/applications-toolbar';
 import { PageHeader } from '@/components/layouts/page-header';
 
@@ -105,7 +107,7 @@ export default async function ApplicationsPage({
 
       <Suspense
         key={JSON.stringify({ ...filters, page })}
-        fallback={<ApplicationsTableSkeleton showSelection={!isDraftView} />}
+        fallback={<ApplicationsResultsSkeleton isDraftView={isDraftView} />}
       >
         <ApplicationsResults
           user={user}