Suspense fallback Not Showing on Vercel Deployment

[alamin-hossain-tech]

Hi,

I have a Remix app where I'm using Suspense with an Await component to load data and show a fallback skeleton during loading. This works perfectly in my local environment. However, after deploying the app to Vercel, the fallback or loading skeleton doesn't appear. Instead, it seems to wait until all the data is loaded before rendering anything.

Here's my code:

import {
  ActionFunctionArgs,
  LoaderFunctionArgs,
  MetaFunction,
} from "@remix-run/node";
import {
  Await,
  Link,
  redirect,
  useLoaderData,
  useSearchParams,
} from "@remix-run/react";
import { Suspense } from "react";
import CategoriesTableRowItem from "~/components/page-based/categories/CategoriesTableRowItem";
import { Button } from "~/components/ui/button";

import {
  Table,
  TableBody,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
import { getUser } from "~/utils/auth/getUser";
import axiosInstance from "~/utils/axios/axiosInstance";
import APIs from "~/utils/constants";

export const meta: MetaFunction = () => {
  return [{ title: "Categories" }];
};

const CategoriesPage = () => {
  const { data } = useLoaderData<typeof loader>();
  const [searchParams] = useSearchParams();
  const page = searchParams.get("page") || 1;

  return (
    <div className="bg-white rounded h-full">
      <div className="p-4 border-b flex items-center justify-between">
        <h4>All Categories</h4>
        <Link to={"/categories/add"}>
          <Button>Add Category</Button>
        </Link>
      </div>
      <div className="p-4">
        <div>
          <Suspense
            fallback={<div className="mt-3">Loading...</div>}
            key={page}
          >
            <Await
              resolve={data}
              errorElement={<p color="red.500">Error loading data.</p>}
              key={page}
            >
              {(data) => {
                const res = data.data;
                return (
                  <div className="max-h-full flex flex-col justify-between">
                    <div className="border rounded mt-3">
                      <Table>
                        <TableHeader className="bg-gray-200">
                          <TableRow>
                            <TableHead>Name</TableHead>
                            <TableHead>Image</TableHead>
                            <TableHead>Slug</TableHead>
                            <TableHead className="text-right">Action</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {res.map((category) => (
                            <CategoriesTableRowItem
                              key={category._id}
                              category={category}
                            />
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                  </div>
                );
              }}
            </Await>
          </Suspense>
        </div>
      </div>
    </div>
  );
};

export default CategoriesPage;

Loader Function:

export async function loader({ request }: LoaderFunctionArgs) {
  try {
    const user = await getUser(request);
    if (!user) {
      redirect("/sign-in");
    }

    const response: Promise<AllCategoryResponse["data"]> = axiosInstance
      .get(APIs.category + `?sortBy=asc&searchKey`, { req: request })
      .then((response) => response.data);

    return { data: response };
  } catch (error) {
    console.error("Error fetching data:", error);
    return {
      data: Promise.resolve({
        success: false,
        message: "Failed to fetch data. Please try again later.",
        data: [],
      }),
    };
  }
}

Action Function:

export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const id = formData.get("id");
  const apiResponse = await axiosInstance.delete(APIs.category + `/${id}`, {
    req: request,
  });

  return apiResponse.data;
}

Issue:
On localhost:
The skeleton or loading state (fallback={

Loading...

}) displays correctly when data is being fetched.

On Vercel (Production):
The fallback does not appear. The page waits until all the data is loaded and then renders everything at once.

Things I've Tried:
Checked network requests; the loader is being called as expected.
Ensured Suspense and Await are implemented correctly.
Debugged if useLoaderData or the loader response had issues, but they seem fine.

Questions:
Could this be related to server-side rendering on Vercel?
Is there a known limitation with Suspense or Await in Remix on certain deployments?
Any tips or insights to resolve this?