feat: prevent flickering of table ui on empty data

[RohitR311]

Summary by CodeRabbit

• Bug Fixes

  • Removed loading state indicators from Recordings and Runs tables
  • Simplified table rendering process

• Refactor

  • Streamlined data fetching logic in table components
  • Eliminated unnecessary loading state management

The changes focus on removing loading spinners and simplifying the rendering of recordings and runs tables, which may impact the user's perception of data loading.

[coderabbitai]

Walkthrough

The pull request involves removing loading state management from two React components: RecordingsTable.tsx and RunsTable.tsx. The changes eliminate the isLoading state variable and associated loading spinner logic in both components. This simplifies the rendering process by directly displaying the table without showing a loading indicator during data fetching. The modifications remove the visual feedback for data loading, changing how the components handle and display data retrieval.

Changes

File	Change Summary
src/components/robot/RecordingsTable.tsx	Removed isLoading state variable and loading spinner logic; simplified data fetching and rendering process
src/components/run/RunsTable.tsx	Deleted isLoading state and conditional loading UI; now renders table directly without loading indication

Possibly related PRs

• feat(ui): runs & robots loader #358: Addition of loading indicator in RecordingsTable component
• feat: optimize robots and runs table ui #382: Optimization of RecordingsTable and loading state introduction
• feat: edit robot inputs #385: Cosmetic changes to RecordingsTable function signature

Suggested labels

Type: Feature

Suggested reviewers

• amhsirak

Poem

🐰 Loading spinners, farewell and adieu!
No more waiting, data comes through
Tables render swift and clean
No spinner to be seen
Rabbit's code hops, light and true! 🚀

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/components/robot/RecordingsTable.tsx (2)

223-223: LGTM! Consider adding a skeleton loader for better UX.

The removal of loading state helps prevent flickering, but you might want to consider adding a skeleton loader to provide visual feedback during data fetching without causing layout shifts.

 const RecordingsTable = ({ ... }) => {
+  const [isInitialLoad, setIsInitialLoad] = React.useState(true);
   ...
   useEffect(() => {
     if (rows.length === 0) {
-      fetchRecordings();
+      fetchRecordings().finally(() => setIsInitialLoad(false));
     }
   }, [fetchRecordings]);
   
   return (
     ...
     <TableBody>
+      {isInitialLoad ? (
+        Array.from({ length: 3 }).map((_, index) => (
+          <TableRow key={`skeleton-${index}`}>
+            {columns.map((column) => (
+              <TableCell key={column.id}>
+                <Skeleton animation="wave" />
+              </TableCell>
+            ))}
+          </TableRow>
+        ))
+      ) : (
         {visibleRows.map((row) => (
           <TableRowMemoized
             key={row.id}
             row={row}
             columns={columns}
             handlers={handlers}
           />
         ))}
+      )}
     </TableBody>
   );
 };

---

358-359: Consider pre-calculating table dimensions to prevent CLS.

To further prevent layout shifts and flickering, you could pre-calculate and set fixed dimensions for the table container based on the viewport.

-      <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
+      <TableContainer 
+        component={Paper} 
+        sx={{ 
+          width: '100%', 
+          overflow: 'hidden', 
+          marginTop: '15px',
+          height: `calc(100vh - 200px)`, // Adjust based on your layout
+          minHeight: '400px' 
+        }}>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bcb880f and fed1640.

📒 Files selected for processing (2)

• src/components/robot/RecordingsTable.tsx (2 hunks)
• src/components/run/RunsTable.tsx (0 hunks)

💤 Files with no reviewable changes (1)

• src/components/run/RunsTable.tsx

🔇 Additional comments (1)

src/components/robot/RecordingsTable.tsx (1)

358-383: LGTM! Clean table structure with performance optimizations.

The table structure is well-organized and uses memoization effectively. The direct rendering without loading states helps prevent layout shifts and flickering.