fix: prevent empty state flash and add skeleton loading for app list

[lyzno1]

Summary

This PR fixes two UX issues with the Apps list page:

1. Empty state flash when switching filters - Fixed by using TanStack Query's keepPreviousData to retain previous data while new data is being fetched
2. Missing skeleton loading state and NewAppCard timing issue - Fixed by adding proper loading state handling and skeleton placeholders

Changes

web/service/use-apps.ts

• Added keepPreviousData import from TanStack Query
• Added placeholderData: keepPreviousData to useInfiniteAppList hook

web/app/components/apps/list.tsx

• Added isFetching and isLoadingCurrentWorkspace state handling
• Added showSkeleton and showEmpty computed values for cleaner conditional rendering
• Updated NewAppCard rendering to show during permission loading with isLoading prop
• Changed condition from isCurrentWorkspaceEditor to (isCurrentWorkspaceEditor || isLoadingCurrentWorkspace)

web/app/components/apps/new-app-card.tsx

• Added isLoading prop (default: false)
• Applied loading styles: opacity-50 and pointer-events-none when loading

web/app/components/apps/app-card-skeleton.tsx (NEW)

• Created skeleton placeholder component that matches AppCard visual layout
• Uses existing Skeleton base components

Screenshots

Before	After

Related Issues

Closes #30614
Closes #30615

[gemini-code-assist]

Summary of Changes

Hello @lyzno1, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the user experience on the Apps list page by resolving two key UI issues. It prevents the 'empty state flash' that occurred when switching filters by intelligently retaining previous data during new data fetches. Additionally, it introduces comprehensive skeleton loading states and refines the NewAppCard's rendering, ensuring a consistent and smooth visual flow from initial load through various data fetching scenarios.

Highlights

• Eliminated empty state flash: Implemented keepPreviousData with TanStack Query to maintain previous data display while new data is being fetched, preventing jarring visual changes during filter switches.
• Introduced skeleton loading states: Added AppCardSkeleton components and refined loading logic to provide a smooth visual experience during initial page loads and data fetching, addressing the missing skeleton loading and NewAppCard timing issues.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request effectively resolves two user experience issues on the Apps list page: the flashing of an empty state during filter changes and the absence of a proper loading indicator. The implementation correctly uses keepPreviousData from TanStack Query to maintain the previous dataset while fetching new data, which is an excellent approach. Additionally, the introduction of a skeleton loader and appropriate loading states for cards significantly improves the perceived performance and provides better visual feedback to the user. The code is well-structured, but I've identified an area with code duplication in the rendering logic that could be refactored for better maintainability.

[Copilot]

Pull request overview

This PR addresses two UX issues in the Apps list page: preventing empty state flashes during filter transitions and adding proper skeleton loading states. The solution leverages TanStack Query's keepPreviousData feature to retain previous data during refetches, combined with improved loading state handling and a new skeleton component.

Key changes:

• Implemented placeholderData: keepPreviousData in the infinite query to prevent data flashing during filter changes
• Added comprehensive loading state logic with showSkeleton and showEmpty computed values
• Created a new AppCardSkeleton component for loading placeholders
• Enhanced NewAppCard to show in a loading/disabled state during permission checks

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
web/service/use-apps.ts	Adds keepPreviousData to useInfiniteAppList to retain previous data during filter transitions
web/app/components/apps/new-app-card.tsx	Adds isLoading prop with opacity and pointer-events styling for loading state
web/app/components/apps/list.tsx	Implements improved loading state logic with skeleton rendering and handles isLoadingCurrentWorkspace
web/app/components/apps/app-card-skeleton.tsx	New skeleton placeholder component matching AppCard layout

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[lyzno1]

/gemini review

[gemini-code-assist]

Code Review

This pull request effectively addresses two user experience issues on the Apps list page by preventing the empty state flash and adding a skeleton loading state. The use of TanStack Query's keepPreviousData is appropriate for the first issue, and the new skeleton components improve the perceived performance during loading. The code changes are well-implemented. I've provided a couple of suggestions for the list.tsx component to enhance code readability and maintainability.