Skip to content

Add skeleton loading states to table components #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add skeleton loading states to table components #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 42 additions & 7 deletions frontend/src/components/jobs/JobTable/JobTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,42 @@ import {
TableContainer,
Table,
TableBody,
TableRow,
TableCell,
Paper,
useTheme,
alpha,
Skeleton,
} from "@mui/material";
import JobTableHeader from "./JobTableHeader";
import JobTableRow from "./JobTableRow";

// Skeleton Row Component for Job Table
const JobTableSkeletonRow = () => {
return (
<TableRow>
<TableCell>
<Skeleton variant="text" width="60%" height={24} />
</TableCell>
<TableCell>
<Skeleton variant="text" width="80%" height={24} />
</TableCell>
<TableCell>
<Skeleton variant="text" width="70%" height={24} />
</TableCell>
<TableCell>
<Skeleton variant="text" width="90%" height={24} />
</TableCell>
<TableCell>
<Skeleton variant="rounded" width={80} height={32} />
</TableCell>
<TableCell>
<Skeleton variant="circular" width={24} height={24} />
</TableCell>
</TableRow>
);
};

const JobTable = ({
jobs,
handleJobClick,
Expand All @@ -22,6 +51,8 @@ const JobTable = ({
handleFilterClose,
sortDirection,
toggleSortDirection,
isLoading = false,
skeletonRows = 5,
}) => {
const theme = useTheme();

Expand Down Expand Up @@ -66,13 +97,17 @@ const JobTable = ({
toggleSortDirection={toggleSortDirection}
/>
<TableBody>
{jobs.map((job) => (
<JobTableRow
key={`${job.metadata.namespace}-${job.metadata.name}`}
job={job}
handleJobClick={handleJobClick}
/>
))}
{isLoading
? Array.from({ length: skeletonRows }).map((_, index) => (
<JobTableSkeletonRow key={`skeleton-${index}`} />
))
: jobs.map((job) => (
<JobTableRow
key={`${job.metadata.namespace}-${job.metadata.name}`}
job={job}
handleJobClick={handleJobClick}
/>
))}
</TableBody>
</Table>
</TableContainer>
Expand Down
8 changes: 5 additions & 3 deletions frontend/src/components/jobs/Jobs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,9 +199,9 @@ const Jobs = () => {
searchText={searchText}
handleSearch={handleSearch}
handleClearSearch={handleClearSearch}
handleRefresh={fetchJobs}
handleRefresh={handleRefresh}
fetchData={fetchJobs}
isRefreshing={false} // Update if needed
isRefreshing={false}
placeholder="Search jobs..."
refreshLabel="Refresh Job Listings"
/>
Expand All @@ -218,6 +218,8 @@ const Jobs = () => {
handleFilterClose={handleFilterClose}
sortDirection={sortDirection}
toggleSortDirection={toggleSortDirection}
isLoading={loading}
skeletonRows={pagination.rowsPerPage}
/>
<JobPagination
pagination={pagination}
Expand All @@ -235,4 +237,4 @@ const Jobs = () => {
);
};

export default Jobs;
export default Jobs;
6 changes: 4 additions & 2 deletions frontend/src/components/pods/Pods.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ const Pods = () => {
handleClearSearch={handleClearSearch}
handleRefresh={handleRefresh}
fetchData={fetchPods}
isRefreshing={false} // Update if needed
isRefreshing={false}
placeholder="Search Pods..."
refreshLabel="Refresh Pods"
/>
Expand All @@ -167,6 +167,8 @@ const Pods = () => {
onSortDirectionToggle={toggleSortDirection}
onFilterChange={handleFilterChange}
onPodClick={handlePodClick}
isLoading={loading}
skeletonRows={pagination.rowsPerPage}
/>
<PodsPagination
totalPods={totalPods}
Expand All @@ -183,4 +185,4 @@ const Pods = () => {
);
};

export default Pods;
export default Pods;
50 changes: 41 additions & 9 deletions frontend/src/components/pods/PodsTable/PodsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,39 @@ import {
TableContainer,
Table,
TableBody,
TableRow,
TableCell,
Paper,
useTheme,
alpha,
Skeleton,
} from "@mui/material";
import TableHeader from "./TableHeader";
import PodRow from "./PodRow";

// Skeleton Row Component for Pods Table
const PodsTableSkeletonRow = () => {
return (
<TableRow>
<TableCell>
<Skeleton variant="text" width="70%" height={24} />
</TableCell>
<TableCell>
<Skeleton variant="text" width="60%" height={24} />
</TableCell>
<TableCell>
<Skeleton variant="text" width="85%" height={24} />
</TableCell>
<TableCell>
<Skeleton variant="rounded" width={80} height={32} />
</TableCell>
<TableCell>
<Skeleton variant="text" width="50%" height={24} />
</TableCell>
</TableRow>
);
};

const PodsTable = ({
pods,
filters,
Expand All @@ -18,6 +44,8 @@ const PodsTable = ({
onSortDirectionToggle,
onFilterChange,
onPodClick,
isLoading = false,
skeletonRows = 5,
}) => {
const theme = useTheme();
const [anchorEl, setAnchorEl] = React.useState({
Expand Down Expand Up @@ -120,18 +148,22 @@ const PodsTable = ({
sortDirection={sortDirection}
/>
<TableBody>
{sortedPods.map((pod) => (
<PodRow
key={`${pod.metadata.namespace}-${pod.metadata.name}`}
pod={pod}
getStatusColor={getStatusColor}
onPodClick={onPodClick}
/>
))}
{isLoading
? Array.from({ length: skeletonRows }).map((_, index) => (
<PodsTableSkeletonRow key={`skeleton-${index}`} />
))
: sortedPods.map((pod) => (
<PodRow
key={`${pod.metadata.namespace}-${pod.metadata.name}`}
pod={pod}
getStatusColor={getStatusColor}
onPodClick={onPodClick}
/>
))}
</TableBody>
</Table>
</TableContainer>
);
};

export default PodsTable;
export default PodsTable;
60 changes: 50 additions & 10 deletions frontend/src/components/queues/QueueTable/QueueTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,45 @@ import {
TableContainer,
Table,
TableBody,
TableRow,
TableCell,
Paper,
useTheme,
alpha,
Skeleton,
} from "@mui/material";
import QueueTableHeader from "./QueueTableHeader";
import QueueTableRow from "./QueueTableRow";
import QueueTableDeleteDialog from "./QueueTableDeleteDialog";

// Skeleton Row Component for Queue Table
const QueueTableSkeletonRow = ({ allocatedFields }) => {
return (
<TableRow>
<TableCell>
<Skeleton variant="text" width="70%" height={24} />
</TableCell>
{allocatedFields.map((field) => (
<TableCell key={field}>
<Skeleton variant="text" width="40%" height={24} />
</TableCell>
))}
<TableCell>
<Skeleton variant="text" width="85%" height={24} />
</TableCell>
<TableCell>
<Skeleton variant="rounded" width={70} height={28} />
</TableCell>
<TableCell>
<div style={{ display: "flex", gap: "8px" }}>
<Skeleton variant="circular" width={24} height={24} />
<Skeleton variant="circular" width={24} height={24} />
</div>
</TableCell>
</TableRow>
);
};

const QueueTable = ({
sortedQueues,
allocatedFields,
Expand All @@ -24,6 +55,8 @@ const QueueTable = ({
handleFilterClose,
setAnchorEl,
handleDelete,
isLoading = false,
skeletonRows = 5,
}) => {
const theme = useTheme();
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
Expand Down Expand Up @@ -94,15 +127,22 @@ const QueueTable = ({
setAnchorEl={setAnchorEl}
/>
<TableBody>
{sortedQueues.map((queue) => (
<QueueTableRow
key={queue.metadata.name}
queue={queue}
allocatedFields={allocatedFields}
handleQueueClick={handleQueueClick}
handleOpenDeleteDialog={handleOpenDeleteDialog}
/>
))}
{isLoading
? Array.from({ length: skeletonRows }).map((_, index) => (
<QueueTableSkeletonRow
key={`skeleton-${index}`}
allocatedFields={allocatedFields}
/>
))
: sortedQueues.map((queue) => (
<QueueTableRow
key={queue.metadata.name}
queue={queue}
allocatedFields={allocatedFields}
handleQueueClick={handleQueueClick}
handleOpenDeleteDialog={handleOpenDeleteDialog}
/>
))}
</TableBody>
</Table>
</TableContainer>
Expand All @@ -116,4 +156,4 @@ const QueueTable = ({
);
};

export default QueueTable;
export default QueueTable;
8 changes: 5 additions & 3 deletions frontend/src/components/queues/Queues.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Box, Typography } from "@mui/material";
import axios from "axios";
import { parseCPU, parseMemoryToMi } from "../utils"; // Adjust this path based on your project structure
import { parseCPU, parseMemoryToMi } from "../utils";
import SearchBar from "../Searchbar";
import QueueTable from "./QueueTable/QueueTable";
import QueuePagination from "./QueuePagination";
Expand Down Expand Up @@ -225,7 +225,7 @@ const Queues = () => {
handleClearSearch={handleClearSearch}
handleRefresh={handleRefresh}
fetchData={fetchQueues}
isRefreshing={false} // Update if needed
isRefreshing={false}
placeholder="Search queues..."
refreshLabel="Refresh Queues"
/>
Expand All @@ -242,6 +242,8 @@ const Queues = () => {
uniqueStates={uniqueStates}
handleFilterClose={handleFilterClose}
setAnchorEl={setAnchorEl}
isLoading={loading}
skeletonRows={pagination.rowsPerPage}
/>
<QueuePagination
pagination={pagination}
Expand All @@ -259,4 +261,4 @@ const Queues = () => {
);
};

export default Queues;
export default Queues;