feat: implement Suspense-based loading states across application pages

[Abhinav1190P]

Description

Implemented deferred data loading using Suspense and Await for the Dashboard, Inventory Management, and Sales Log pages. Added page-specific skeleton loaders to display placeholder content while data is being fetched, improving the overall loading experience and perceived performance.

Related Issues

Fixes #35

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

Screenshots (if applicable)

N/A

[vercel]

Someone is attempting to deploy a commit to the participationcorner2025-8967's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Codesense Ai: This PR is too large to review automatically. A human maintainer will take a look!

[rushikesh-bobade]

Hey @Abhinav1190P! Excellent work here. Using Suspense and Await to defer the data loading is exactly what we needed to improve the perceived performance, and the skeletons look great!

I just finished reviewing the code and everything looks perfect. However, we just merged PR #55 (HTTP Edge Caching) which added a headers export to the same files you modified, causing a minor merge conflict.

Could you please git fetch and git rebase origin/main to resolve the conflicts? You just need to keep both your new Suspense logic AND the new export const headers block.

Once you push the resolved branch, I will merge this immediately!

[rushikesh-bobade]

Hey @Abhinav1190P, thanks for the PR! We recently made some massive changes to the main branch to generalize the database schema and UI components. As a result, this PR now has merge conflicts. Could you please fetch the latest main branch, rebase your changes (or merge main into your branch), and resolve the conflicts? Let me know once that's done!

[github-actions]

📝 Summary

The provided pull request introduces new skeleton components for the dashboard, inventory management, and sales log pages. These components are designed to display a loading state while data is being fetched. The changes also update the respective route files to utilize these new skeleton components.

📂 Files Changed

• app/blocks/dashboard/dashboard-skeleton.tsx: New file, introduces a skeleton component for the dashboard page.
• app/blocks/inventory-management/inventory-table-skeleton.tsx: New file, introduces a skeleton component for the inventory table.
• app/blocks/sales-log/sales-log-skeleton.tsx: New file, introduces a skeleton component for the sales log table.
• app/routes/dashboard.tsx: Updated to use the new DashboardSkeleton component.
• app/routes/inventory-management.tsx: Updated to use the new InventoryTableSkeleton component.
• app/routes/sales-log.tsx: Updated to use the new SalesTableSkeleton component.

🎭 Code Poem

Skeletons born, to load with care,
Data fetching, while users wait there,
Dashboard, inventory, sales log too,
Loading states, for a better view.

🚨 Bugs & Architectural Violations

* The code seems to follow the architectural rules, using Remix and Prisma as required. * The use of Vanilla CSS Modules is consistent throughout the changes. * All UI components are placed in the correct `app/blocks/` directory. * No Tailwind CSS classes are used, adhering to the rules. * However, it's worth noting that the `Skeleton` component is used extensively, and its implementation should be reviewed to ensure it follows the performance guidelines. * The `dashboard-skeleton.tsx` file uses inline styles, which might not be the best practice. Consider moving these styles to a separate CSS module file. * The `inventory-table-skeleton.tsx` and `sales-log-skeleton.tsx` files use CSS modules correctly. * No accessibility issues are immediately apparent, but a thorough review of the components' accessibility features, such as `aria-hidden` and `roles`, is recommended.

💡 Suggestions & Best Practices

* Consider adding a `defer` function to the `Skeleton` component to improve performance. * Review the `Skeleton` component's implementation to ensure it uses `transform` or `opacity` for CSS animations, rather than triggering main-thread repaints. * Add accessibility features, such as `aria-hidden` and `roles`, to the skeleton components to improve their accessibility. * Consider using a more robust loading state management system, rather than relying on a simple `Skeleton` component. * Review the code for any potential performance bottlenecks, such as unnecessary re-renders or slow data fetching. * Consider adding error handling and edge cases to the skeleton components to ensure they behave correctly in unexpected situations.

[Abhinav1190P]

Yeah i can add skeleton back later, since it is low priority

[rushikesh-bobade]

Hey @Abhinav1190P!

Thanks for pushing that merge! It looks like during the merge conflict resolution, the original code from main accidentally overwrote your new <Suspense> logic, which reverted the pages back to being synchronous and caused the TypeScript build to fail.

Don't worry, merge conflicts can be tricky! To fix this, you just need to wrap your Promise.all in the loaders and defer them, then use your skeletons as the fallback in the UI.

Here is exactly how you can update app/routes/dashboard.tsx to fix the build and restore the skeletons:

1. In the loader:

  const dashboardPromise = Promise.all([
    // ... your prisma queries ...
  ]).then(([inventoryStats, salesData, expensesData]) => {
     // ... your formatting logic ...
    return { inventoryStats: serializedStats, salesData: serializedSales, expensesData: serializedExpenses };
  });

  return { dashboardData: dashboardPromise };

2. In the DashboardPage component:

import { DashboardSkeleton } from "~/blocks/dashboard/dashboard-skeleton";

export default function DashboardPage() {
  const { dashboardData } = useLoaderData<typeof loader>();

  return (
    <div className={styles.page}>
      <DashboardHeader />
      <AIInsightsPanel />
      <Suspense fallback={<DashboardSkeleton />}>
        <Await resolve={dashboardData}>
          {({ inventoryStats, salesData, expensesData }) => (
            <>
              {/* ... render the charts and tables using the destructured data here ... */}
            </>
          )}
        </Await>
      </Suspense>
    </div>
  );
}

You'll just need to apply this same pattern to inventory-management.tsx and sales-log.tsx as well. Give that a shot and let me know if you run into any issues—I'm happy to help you get this across the finish line!