table-skeleton.tsx

Overview

The table-skeleton.tsx file provides lightweight React components designed to handle common table UI states such as loading and empty data scenarios. It uses a skeleton row pattern to display either a loading spinner or a "no results" message centered across all table columns. This approach improves user experience by clearly communicating the table's state during asynchronous data fetching or when no data is available.

Components and Functions

Type Definitions

type IProps = { columnsLength: number };

• Purpose: Defines a prop type for the number of columns in the table. This ensures that components spanning multiple columns render correctly.

Row Component

function Row({ children, columnsLength }: PropsWithChildren & IProps): JSX.Element

• Purpose:
  A helper component that renders a single table row (<TableRow>) with one table cell (<TableCell>) spanning all columns. It centers its content vertically and horizontally.

• Parameters:

  • children (React.ReactNode): The content to display inside the cell.

  • columnsLength (number): Number of columns the cell should span.

• Returns:
  JSX element representing a table row with a single, centered cell.

• Usage Example:

  <Row columnsLength={5}>
    <span>Loading...</span>
  </Row>
  

• Implementation Details:
  The cell uses colSpan={columnsLength} to stretch across the entire width of the table and applies CSS classes "h-24 text-center" for height and text alignment.

TableSkeleton Component

export function TableSkeleton({
  columnsLength,
  children,
}: PropsWithChildren & IProps): JSX.Element

• Purpose:
  Displays a loading skeleton row inside a table, showing a spinning loader icon by default or custom children if provided.

• Parameters:

  • columnsLength (number): Number of columns in the table for correct spanning.

  • children (optional React.ReactNode): Custom content to display instead of the default loader.

• Returns:
  JSX element representing a skeleton loading row.

• Usage Example:

  <TableSkeleton columnsLength={4} />
  // Displays a spinning loader centered across 4 columns.
  
  <TableSkeleton columnsLength={3}>
    <span>Loading data, please wait...</span>
  </TableSkeleton>
  // Displays custom loading message instead of loader icon.
  

• Implementation Details:
  Uses the Row component to render a full-width cell with either the Loader2 spinner icon (from lucide-react) or the passed children. The spinner has animation and styling to indicate loading.

TableEmpty Component

export function TableEmpty({ columnsLength }: { columnsLength: number }): JSX.Element

• Purpose:
  Displays a table row indicating that no results are available.

• Parameters:

  • columnsLength (number): Number of columns in the table for correct spanning.

• Returns:
  JSX element representing an empty state row with a localized "no results" message.

• Usage Example:

  <TableEmpty columnsLength={6} />
  // Displays a "No results" message centered across 6 columns.
  

• Implementation Details:
  Utilizes the t function from the i18next library to provide internationalized text (t('common.noResults')). This text is wrapped inside the Row component for consistent styling.

Implementation Details and Algorithms

• Reusability via Row:
  The internal Row component abstracts the common layout pattern of a table row with a single cell spanning all columns, reducing duplication and ensuring consistent styling.

• Loading Spinner:
  The Loader2 icon from lucide-react is animated with a CSS class animate-spin for visual feedback during loading states.

• Internationalization:
  The TableEmpty component uses i18next's t function to support localization of the no-results message, making it adaptable to different languages.

Interaction with Other Parts of the System

• UI Components:
  Relies on TableRow and TableCell components imported from ./ui/table. These presumably provide styled table elements consistent with the application’s design system.

• Localization:
  Uses the t function from i18next for translation, integrating with the app’s internationalization setup.

• Icon Library:
  Uses Loader2 from lucide-react for the loading spinner.

• Usage Context:
  These components are intended to be used inside a <table> element where asynchronous data fetching or conditional rendering determines if the table should show loading or empty states.

Diagram: Component Structure and Relationships

componentDiagram
    component TableSkeleton {
      +columnsLength: number
      +children?: ReactNode
    }
    component TableEmpty {
      +columnsLength: number
    }
    component Row {
      +columnsLength: number
      +children: ReactNode
    }
    component TableRow
    component TableCell
    component Loader2
    component i18next.t
    
    TableSkeleton --> Row
    TableEmpty --> Row
    Row --> TableRow
    Row --> TableCell
    TableSkeleton --> Loader2
    TableEmpty --> i18next.t

Summary

The table-skeleton.tsx file encapsulates UI components for common table states, focusing on loading and empty data scenarios. It promotes consistent UI behavior through a reusable Row component and integrates smoothly with localization and icon libraries. This modular approach simplifies the implementation of user-friendly and accessible tables within the React application.