⚡️ Add loading screens #1553
⚡️ Add loading screens #1553
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
WalkthroughSeveral admin-related components have been updated to provide a consistent loading indicator. New asynchronous Loading functions have been added in multiple directories, each returning a Spinner component from the shared component library. In addition, existing synchronous Loading functions that previously returned null have been transformed into asynchronous functions which now render the Spinner. These adjustments affect pages in events, polls, and various settings (billing, preferences, profile) to standardize the asynchronous loading UI. Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant A as Admin Page
participant L as Loading Component
participant S as Spinner
U->>A: Navigates to admin section
A->>L: Invokes Loading function
L->>S: Imports and calls Spinner
S-->>L: Returns Spinner JSX
L-->>A: Renders Spinner in UI
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/web/src/app/[locale]/(admin)/settings/billing/loading.tsx (1)
1-5: Well-structured loading component implementation!Good use of Next.js 13+ loading component patterns with the
asynckeyword and sharedSpinnercomponent for consistent loading UX across the admin interface.apps/web/src/app/[locale]/(admin)/loading.tsx (1)
1-5: LGTM - Consider future UX enhancements!Implementation follows the standardized loading pattern. Since this is the root admin loading component, consider adding delayed loading states or progress indicators in the future for better UX during longer loading periods.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
apps/web/src/app/[locale]/(admin)/events/loading.tsx(1 hunks)apps/web/src/app/[locale]/(admin)/loading.tsx(1 hunks)apps/web/src/app/[locale]/(admin)/polls/loading.tsx(1 hunks)apps/web/src/app/[locale]/(admin)/settings/billing/loading.tsx(1 hunks)apps/web/src/app/[locale]/(admin)/settings/loading.tsx(1 hunks)apps/web/src/app/[locale]/(admin)/settings/preferences/loading.tsx(1 hunks)apps/web/src/app/[locale]/(admin)/settings/profile/loading.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Unit tests
- GitHub Check: Type check
- GitHub Check: Linting
- GitHub Check: Integration tests
🔇 Additional comments (5)
apps/web/src/app/[locale]/(admin)/settings/profile/loading.tsx (1)
1-5: LGTM - Consistent with other loading components!Implementation matches the standardized loading pattern used across the admin interface.
apps/web/src/app/[locale]/(admin)/settings/preferences/loading.tsx (1)
1-5: LGTM - Maintains loading component consistency!Implementation follows the standardized loading pattern used throughout the admin interface.
apps/web/src/app/[locale]/(admin)/events/loading.tsx (1)
1-5: 🏁 Script executed:#!/bin/bash # Check Spinner component implementation ast-grep --pattern 'export function Spinner() { $$$ }'Length of output: 58
apps/web/src/app/[locale]/(admin)/settings/loading.tsx (1)
1-5: Implementation matches events route loading component.The implementation is consistent with the events route loading component and follows Next.js conventions.
See the TypeScript return type suggestion in the events route loading component review.
apps/web/src/app/[locale]/(admin)/polls/loading.tsx (1)
1-5: Consider creating a shared loading component.The implementation is consistent with other route loading components and follows Next.js conventions.
Since this loading UI is identical across multiple routes, consider creating a shared loading component to reduce code duplication:
// apps/web/src/components/loading.tsx import { Spinner } from "@/components/spinner"; export default async function Loading(): Promise<JSX.Element> { return <Spinner />; }Then import and reuse it across routes:
export { default } from "@/components/loading";See the TypeScript return type suggestion in the events route loading component review.
Summary by CodeRabbit