Add table loading skeletons and move data fetching down (#207)

* Use tailwind variants

* Move data fetching down

* Add table skeleton

* Update pagination data fetching

* Fix skeleton layout shift

* Add key to suspense to trigger it on subsequent navigation

dashboard/15-final/app/dashboard/invoices/page.tsx

@@ -2,8 +2,10 @@ import Pagination from '@/app/ui/invoices/pagination';
 import Search from '@/app/ui/search';
 import { CreateInvoice } from '@/app/ui/invoices/buttons';
 import Table from '@/app/ui/invoices/table';
-import { fetchFilteredInvoices } from '@/app/lib/data';
 import { lusitana } from '@/app/ui/fonts';
+import { InvoicesTableSkeleton } from '@/app/ui/dashboard/skeletons';
+import { Suspense } from 'react';
+import { fetchInvoicesPages } from '@/app/lib/data';
 
 export default async function Page({
   searchParams,
@@ -14,12 +16,8 @@ export default async function Page({
   };
 }) {
   const query = searchParams?.query || '';
-  const currentPage = Number(searchParams?.page || '1');
-
-  const { invoices, totalPages } = await fetchFilteredInvoices(
-    query,
-    currentPage,
-  );
+  const currentPage = Number(searchParams?.page) || 1;
+  const totalPages = await fetchInvoicesPages(query);
 
   return (
     <div className="w-full">
@@ -30,9 +28,11 @@ export default async function Page({
         <Search placeholder="Search invoices..." />
         <CreateInvoice />
       </div>
-      <Table invoices={invoices} />
+      <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
+        <Table query={query} currentPage={currentPage} />
+      </Suspense>
       <div className="mt-5 flex w-full justify-center">
-        <Pagination totalPages={totalPages} currentPage={currentPage} />
+        <Pagination totalPages={totalPages} />
       </div>
     </div>
   );

dashboard/15-final/app/lib/data.ts

@@ -79,15 +79,15 @@ export async function fetchCardData() {
   }
 }
 
+const ITEMS_PER_PAGE = 6;
 export async function fetchFilteredInvoices(
   query: string,
   currentPage: number,
 ) {
-  const itemsPerPage = 6;
-  const offset = (currentPage - 1) * itemsPerPage;
+  const offset = (currentPage - 1) * ITEMS_PER_PAGE;
 
   try {
-    const data = await sql<InvoicesTable>`
+    const invoices = await sql<InvoicesTable>`
       SELECT
         invoices.id,
         invoices.amount,
@@ -105,34 +105,37 @@ export async function fetchFilteredInvoices(
         invoices.date::text ILIKE ${`%${query}%`} OR
         invoices.status ILIKE ${`%${query}%`}
       ORDER BY invoices.date DESC
-      LIMIT ${itemsPerPage} OFFSET ${offset}
+      LIMIT ${ITEMS_PER_PAGE} OFFSET ${offset}
     `;
 
-    const count = await sql`
-      SELECT COUNT(*)
-      FROM invoices
-      JOIN customers ON invoices.customer_id = customers.id
-      WHERE
-        customers.name ILIKE ${`%${query}%`} OR
-        customers.email ILIKE ${`%${query}%`} OR
-        invoices.amount::text ILIKE ${`%${query}%`} OR
-        invoices.date::text ILIKE ${`%${query}%`} OR
-        invoices.status ILIKE ${`%${query}%`}
-    `;
-
-    const totalRecords = Number(count.rows[0].count);
-    const totalPages = Math.ceil(totalRecords / itemsPerPage);
-
-    return {
-      invoices: data.rows,
-      totalPages,
-    };
+    return invoices.rows;
   } catch (error) {
     console.error('Database Error:', error);
     throw new Error('Failed to fetch invoices.');
   }
 }
 
+export async function fetchInvoicesPages(query: string) {
+  try {
+    const count = await sql`SELECT COUNT(*)
+    FROM invoices
+    JOIN customers ON invoices.customer_id = customers.id
+    WHERE
+      customers.name ILIKE ${`%${query}%`} OR
+      customers.email ILIKE ${`%${query}%`} OR
+      invoices.amount::text ILIKE ${`%${query}%`} OR
+      invoices.date::text ILIKE ${`%${query}%`} OR
+      invoices.status ILIKE ${`%${query}%`}
+  `;
+
+    const totalPages = Math.ceil(Number(count.rows[0].count) / ITEMS_PER_PAGE);
+    return totalPages;
+  } catch (error) {
+    console.error('Database Error:', error);
+    throw new Error('Failed to fetch total number of invoices.');
+  }
+}
+
 export async function fetchInvoiceById(id: string) {
   try {
     const data = await sql<InvoiceForm>`

dashboard/15-final/app/ui/dashboard/skeletons.tsx

@@ -90,3 +90,118 @@ export default function DashboardSkeleton() {
     </>
   );
 }
+
+export function TableRowSkeleton() {
+  return (
+    <tr className="w-full border-b border-gray-100 last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg">
+      {/* Customer Name and Image */}
+      <td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3">
+        <div className="flex items-center gap-3">
+          <div className="h-8 w-8 rounded-full bg-gray-100"></div>
+          <div className="h-6 w-24 rounded bg-gray-100"></div>
+        </div>
+      </td>
+      {/* Email */}
+      <td className="whitespace-nowrap px-3 py-3">
+        <div className="h-6 w-32 rounded bg-gray-100"></div>
+      </td>
+      {/* Amount */}
+      <td className="whitespace-nowrap px-3 py-3">
+        <div className="h-6 w-16 rounded bg-gray-100"></div>
+      </td>
+      {/* Date */}
+      <td className="whitespace-nowrap px-3 py-3">
+        <div className="h-6 w-16 rounded bg-gray-100"></div>
+      </td>
+      {/* Status */}
+      <td className="whitespace-nowrap px-3 py-3">
+        <div className="h-6 w-16 rounded bg-gray-100"></div>
+      </td>
+      {/* Actions */}
+      <td className="whitespace-nowrap py-3 pl-6 pr-3">
+        <div className="flex justify-end gap-3">
+          <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
+          <div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+export function InvoicesMobileSkeleton() {
+  return (
+    <div className="mb-2 w-full rounded-md bg-white p-4">
+      <div className="flex items-center justify-between border-b border-gray-100 pb-8">
+        <div className="flex items-center">
+          <div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
+          <div className="h-6 w-16 rounded bg-gray-100"></div>
+        </div>
+        <div className="h-6 w-16 rounded bg-gray-100"></div>
+      </div>
+      <div className="flex w-full items-center justify-between pt-4">
+        <div>
+          <div className="h-6 w-16 rounded bg-gray-100"></div>
+          <div className="mt-2 h-6 w-24 rounded bg-gray-100"></div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <div className="h-10 w-10 rounded bg-gray-100"></div>
+          <div className="h-10 w-10 rounded bg-gray-100"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function InvoicesTableSkeleton() {
+  return (
+    <div className="mt-6 flow-root">
+      <div className="inline-block min-w-full align-middle">
+        <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
+          <div className="md:hidden">
+            <InvoicesMobileSkeleton />
+            <InvoicesMobileSkeleton />
+            <InvoicesMobileSkeleton />
+            <InvoicesMobileSkeleton />
+            <InvoicesMobileSkeleton />
+            <InvoicesMobileSkeleton />
+          </div>
+          <table className="hidden min-w-full text-gray-900 md:table">
+            <thead className="rounded-lg text-left text-sm font-normal">
+              <tr>
+                <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
+                  Customer
+                </th>
+                <th scope="col" className="px-3 py-5 font-medium">
+                  Email
+                </th>
+                <th scope="col" className="px-3 py-5 font-medium">
+                  Amount
+                </th>
+                <th scope="col" className="px-3 py-5 font-medium">
+                  Date
+                </th>
+                <th scope="col" className="px-3 py-5 font-medium">
+                  Status
+                </th>
+                <th
+                  scope="col"
+                  className="relative pb-4 pl-3 pr-6 pt-2 sm:pr-6"
+                >
+                  <span className="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white">
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+              <TableRowSkeleton />
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

dashboard/15-final/app/ui/invoices/pagination.tsx

@@ -6,15 +6,11 @@ import Link from 'next/link';
 import { generatePagination } from '@/app/lib/utils';
 import { usePathname, useSearchParams } from 'next/navigation';
 
-export default function Pagination({
-  currentPage,
-  totalPages,
-}: {
-  currentPage: number;
-  totalPages: number;
-}) {
+export default function Pagination({ totalPages }: { totalPages: number }) {
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const currentPage = Number(searchParams.get('page')) || 1;
+  const allPages = generatePagination(currentPage, totalPages);
 
   const createPageURL = (pageNumber: number | string) => {
     const params = new URLSearchParams(searchParams);
@@ -22,8 +18,6 @@ export default function Pagination({
     return `${pathname}?${params.toString()}`;
   };
 
-  const allPages = generatePagination(currentPage, totalPages);
-
   return (
     <div className="inline-flex">
       <PaginationArrow

dashboard/15-final/app/ui/invoices/table.tsx

@@ -2,138 +2,121 @@ import Image from 'next/image';
 import { UpdateInvoice, DeleteInvoice } from '@/app/ui/invoices/buttons';
 import InvoiceStatus from '@/app/ui/invoices/status';
 import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
-import { InvoicesTable } from '@/app/lib/definitions';
+import { fetchFilteredInvoices } from '@/app/lib/data';
 
 export default async function InvoicesTable({
-  invoices,
+  query,
+  currentPage,
 }: {
-  invoices: InvoicesTable[];
+  query: string;
+  currentPage: number;
 }) {
-  const styles = `
-    /* Round top-left and top-right corners of the first row in tbody */
-    tbody tr:first-child td:first-child {
-        border-top-left-radius: 8px;
-    }
-    tbody tr:first-child td:last-child {
-        border-top-right-radius: 8px;
-    }
+  const invoices = await fetchFilteredInvoices(query, currentPage);
 
-    /* Round bottom-left and bottom-right corners of the last row in tbody */
-    tbody tr:last-child td:first-child {
-        border-bottom-left-radius: 8px;
-    }
-    tbody tr:last-child td:last-child {
-        border-bottom-right-radius: 8px;
-    }
-  `;
   return (
     <div className="mt-6 flow-root">
-      <style>{styles}</style>
-      <div>
-        <div className="inline-block min-w-full align-middle">
-          <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
-            <div className="md:hidden">
-              {invoices?.map((invoice) => (
-                <div
-                  key={invoice.id}
-                  className="mb-2 w-full rounded-md bg-white p-4"
-                >
-                  <div className="flex items-center justify-between border-b pb-4">
-                    <div>
-                      <div className="mb-2 flex items-center">
-                        <Image
-                          src={invoice.image_url}
-                          className="mr-2 rounded-full"
-                          width={28}
-                          height={28}
-                          alt={`${invoice.name}'s profile picture`}
-                        />
-                        <p>{invoice.name}</p>
-                      </div>
-                      <p className="text-sm text-gray-500">{invoice.email}</p>
+      <div className="inline-block min-w-full align-middle">
+        <div className="rounded-lg bg-gray-50 p-2 md:pt-0">
+          <div className="md:hidden">
+            {invoices?.map((invoice) => (
+              <div
+                key={invoice.id}
+                className="mb-2 w-full rounded-md bg-white p-4"
+              >
+                <div className="flex items-center justify-between border-b pb-4">
+                  <div>
+                    <div className="mb-2 flex items-center">
+                      <Image
+                        src={invoice.image_url}
+                        className="mr-2 rounded-full"
+                        width={28}
+                        height={28}
+                        alt={`${invoice.name}'s profile picture`}
+                      />
+                      <p>{invoice.name}</p>
                     </div>
-                    <InvoiceStatus status={invoice.status} />
+                    <p className="text-sm text-gray-500">{invoice.email}</p>
                   </div>
-                  <div className="flex w-full items-center justify-between pt-4">
-                    <div>
-                      <p className="text-xl font-medium">
-                        {formatCurrency(invoice.amount)}
-                      </p>
-                      <p>{formatDateToLocal(invoice.date)}</p>
-                    </div>
-                    <div className="flex justify-end gap-2">
-                      <UpdateInvoice id={invoice.id} />
-                      <DeleteInvoice id={invoice.id} />
-                    </div>
+                  <InvoiceStatus status={invoice.status} />
+                </div>
+                <div className="flex w-full items-center justify-between pt-4">
+                  <div>
+                    <p className="text-xl font-medium">
+                      {formatCurrency(invoice.amount)}
+                    </p>
+                    <p>{formatDateToLocal(invoice.date)}</p>
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <UpdateInvoice id={invoice.id} />
+                    <DeleteInvoice id={invoice.id} />
                   </div>
                 </div>
-              ))}
-            </div>
-            <table className="hidden min-w-full text-gray-900 md:table">
-              <thead className="rounded-lg text-left text-sm font-normal">
-                <tr>
-                  <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
-                    Customer
-                  </th>
-                  <th scope="col" className="px-3 py-5 font-medium">
-                    Email
-                  </th>
-                  <th scope="col" className="px-3 py-5 font-medium">
-                    Amount
-                  </th>
-                  <th scope="col" className="px-3 py-5 font-medium">
-                    Date
-                  </th>
-                  <th scope="col" className="px-3 py-5 font-medium">
-                    Status
-                  </th>
-                  <th
-                    scope="col"
-                    className="relative pb-4 pl-3 pr-6 pt-2 sm:pr-6"
-                  >
-                    <span className="sr-only">Edit</span>
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="bg-white">
-                {invoices?.map((invoice) => (
-                  <tr
-                    key={invoice.id}
-                    className="w-full border-b text-sm last-of-type:border-none"
-                  >
-                    <td className="whitespace-nowrap px-6 py-5">
-                      <div className="flex items-center gap-3">
-                        <Image
-                          src={invoice.image_url}
-                          className="rounded-full"
-                          width={28}
-                          height={28}
-                          alt={`${invoice.name}'s profile picture`}
-                        />
-                        <p>{invoice.name}</p>
-                      </div>
-                    </td>
-                    <td className="whitespace-nowrap px-3 py-3">
-                      {invoice.email}
-                    </td>
-                    <td className="whitespace-nowrap px-3 py-3">
-                      {formatCurrency(invoice.amount)}
-                    </td>
-                    <td className="whitespace-nowrap px-3 py-3">
-                      {formatDateToLocal(invoice.date)}
-                    </td>
-                    <td className="whitespace-nowrap px-3 py-3">
-                      <InvoiceStatus status={invoice.status} />
-                    </td>
-                    <td className="flex justify-end gap-2 whitespace-nowrap px-6 py-3">
+              </div>
+            ))}
+          </div>
+          <table className="hidden min-w-full text-gray-900 md:table">
+            <thead className="rounded-lg text-left text-sm font-normal">
+              <tr>
+                <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
+                  Customer
+                </th>
+                <th scope="col" className="px-3 py-5 font-medium">
+                  Email
+                </th>
+                <th scope="col" className="px-3 py-5 font-medium">
+                  Amount
+                </th>
+                <th scope="col" className="px-3 py-5 font-medium">
+                  Date
+                </th>
+                <th scope="col" className="px-3 py-5 font-medium">
+                  Status
+                </th>
+                <th scope="col" className="relative py-3 pl-6 pr-3">
+                  <span className="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white">
+              {invoices?.map((invoice) => (
+                <tr
+                  key={invoice.id}
+                  className="w-full border-b py-3 text-sm last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg"
+                >
+                  <td className="whitespace-nowrap py-3 pl-6 pr-3">
+                    <div className="flex items-center gap-3">
+                      <Image
+                        src={invoice.image_url}
+                        className="rounded-full"
+                        width={28}
+                        height={28}
+                        alt={`${invoice.name}'s profile picture`}
+                      />
+                      <p>{invoice.name}</p>
+                    </div>
+                  </td>
+                  <td className="whitespace-nowrap px-3 py-3">
+                    {invoice.email}
+                  </td>
+                  <td className="whitespace-nowrap px-3 py-3">
+                    {formatCurrency(invoice.amount)}
+                  </td>
+                  <td className="whitespace-nowrap px-3 py-3">
+                    {formatDateToLocal(invoice.date)}
+                  </td>
+                  <td className="whitespace-nowrap px-3 py-3">
+                    <InvoiceStatus status={invoice.status} />
+                  </td>
+                  <td className="whitespace-nowrap py-3 pl-6 pr-3">
+                    <div className="flex justify-end gap-3">
                       <UpdateInvoice id={invoice.id} />
                       <DeleteInvoice id={invoice.id} />
-                    </td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
         </div>
       </div>
     </div>