Skip to content

improvement: add skeleton loading transitions to overview page#5320

Merged
scott-ray-wilson merged 2 commits intomainfrom
improve-loading-secret-overview
Jan 31, 2026
Merged

improvement: add skeleton loading transitions to overview page#5320
scott-ray-wilson merged 2 commits intomainfrom
improve-loading-secret-overview

Conversation

@scott-ray-wilson
Copy link
Contributor

Context

Add skeleton loading component and use on secret overview page loading transitions

Screenshots

CleanShot 2026-01-29 at 19 03 04@2x ## Steps to verify the change

Type

  • Fix
  • Feature
  • Improvement
  • Breaking
  • Docs
  • Chore

Checklist

  • Title follows the conventional commit format: type(scope): short description (scope is optional, e.g., fix: prevent crash on sync or fix(api): handle null response).
  • Tested locally
  • Updated docs (if needed)
  • Read the contributing guide

@maidul98
Copy link
Collaborator

maidul98 commented Jan 30, 2026

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 30, 2026

Greptile Overview

Greptile Summary

This PR improves loading UX by replacing the full-screen loader with inline skeleton loading states in the secret overview table. The implementation creates a reusable Skeleton component and displays skeleton rows during data fetches, maintaining table structure and providing smoother visual feedback during navigation.

Key changes:

  • New Skeleton component with pulse animation for loading states
  • Removed full-screen Lottie loader from OverviewPage
  • Shows skeleton rows during initial load and pagination using isOverviewLoading and isPlaceholderData flags
  • Tracks previous page size to render appropriate number of skeleton rows during transitions

Issues found:

  • React key on line 1106 interpolates object instead of .slug property, creating invalid keys
  • useEffect dependency array missing perPage, which could cause stale cached values if page size changes during loading

Confidence Score: 4/5

  • Safe to merge after fixing React key syntax issue
  • Clean implementation with good UX improvements, but has a syntax bug in React key generation and a minor dependency array issue that should be fixed
  • Pay attention to frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx line 1106 for the React key fix

Important Files Changed

Filename Overview
frontend/src/components/v3/generic/Skeleton/Skeleton.tsx New reusable skeleton loading component with pulse animation
frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx Replaced full-screen loader with in-table skeleton rows, tracks previous page size for smoother transitions

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 files reviewed, 2 comments

Edit Code Review Agent Settings | Greptile

@scott-ray-wilson scott-ray-wilson merged commit 7373029 into main Jan 31, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants