chore: Move loading component to UI #3266
Conversation
|
📝 Walkthrough## Walkthrough
This change removes the locally defined `Loading` component from the dashboard app and replaces its usage with the new `Loading` component from the `@unkey/ui` package. All relevant import statements are consolidated, and button loading states are now handled via the `loading` prop instead of conditional rendering. Documentation and examples for the new `Loading` component are added, and it is exported from the UI package.
## Changes
| File(s) | Change Summary |
|-----------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------|
| `apps/dashboard/components/dashboard/loading.tsx` | Deleted the local `Loading` component implementation. |
| `internal/ui/src/components/loading.tsx`, `internal/ui/src/index.ts` | Added new `Loading` component and its export to the UI package. |
| `apps/engineering/content/design/components/loading.mdx`, `apps/engineering/.../loading.example.tsx` | Added documentation and usage examples for the new `Loading` component. |
| `apps/dashboard/app/**/page.tsx`, `apps/dashboard/app/**/client.tsx`, `apps/dashboard/app/**/ts(x)?`, `apps/dashboard/components/**/index.tsx`, `apps/dashboard/components/**/table.tsx`, `apps/dashboard/components/navigation/sidebar/team-switcher.tsx`, `apps/dashboard/components/opt-in.tsx` | Replaced local `Loading` imports with `@unkey/ui`'s `Loading`, consolidated UI component imports, and refactored button loading logic to use the `loading` prop. |
| `apps/dashboard/app/(app)/settings/root-keys/new/client.tsx`, `apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx`, `apps/dashboard/app/new/create-api.tsx`, `apps/dashboard/app/new/create-workspace.tsx`, `apps/dashboard/app/new/keys.tsx`, `apps/dashboard/components/dashboard/root-key-table/index.tsx`, `apps/dashboard/components/dashboard/root-key-table/table.tsx`, `apps/dashboard/app/integrations/vercel/callback/client.tsx` | Removed conditional rendering of the loading spinner inside buttons; now always display static label, using the `loading` prop for state. |
| `apps/dashboard/app/(app)/settings/team/client.tsx`, `apps/dashboard/app/(app)/settings/team/invitations.tsx`, `apps/dashboard/app/(app)/settings/team/members.tsx`, `apps/dashboard/app/(app)/settings/team/role-switcher.tsx`, `apps/dashboard/app/(app)/settings/vercel/client.tsx`, `apps/dashboard/app/(app)/settings/vercel/loading.tsx`, `apps/dashboard/app/(app)/settings/vercel/page.tsx`, `apps/dashboard/app/auth/sign-in/[[...sign-in]]/page.tsx`, `apps/dashboard/app/auth/sign-in/email-code.tsx`, `apps/dashboard/app/auth/sign-in/email-signin.tsx`, `apps/dashboard/app/auth/sign-in/email-verify.tsx`, `apps/dashboard/app/auth/sign-in/oauth-signin.tsx`, `apps/dashboard/app/auth/sign-up/[[...sign-up]]/page.tsx`, `apps/dashboard/app/auth/sign-up/email-code.tsx`, `apps/dashboard/app/auth/sign-up/email-signup.tsx`, `apps/dashboard/app/auth/sign-up/oauth-signup.tsx`, `apps/dashboard/app/integrations/vercel/callback/loading.tsx`, `apps/dashboard/app/integrations/vercel/callback/workspace.tsx` | Changed all `Loading` imports to use `@unkey/ui` instead of local dashboard path; no logic changes. |
| `apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/credits-setup.tsx`, `apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/metadata-setup.tsx`, `apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/logs-table.tsx`, `apps/dashboard/app/(app)/apis/[apiId]/settings/components/delete-protection.tsx`, `apps/dashboard/app/(app)/authorization/permissions/[permissionId]/settings-client.tsx`, `apps/dashboard/app/(app)/authorization/roles/[roleId]/settings-client.tsx`, `apps/dashboard/app/(app)/identities/[identityId]/page.tsx`, `apps/dashboard/app/(app)/logs/components/table/logs-table.tsx`, `apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx`, `apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/logs-table.tsx`, `apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/logs-table.tsx`, `apps/dashboard/app/(app)/settings/billing/client.tsx`, `apps/dashboard/app/(app)/settings/billing/page.tsx`, `apps/dashboard/components/dashboard/feedback-component.tsx` | Consolidated multiple UI component imports from `@unkey/ui` into single import lines; no logic changes. |
| `internal/ui/src/components/animated-loading-spinner.tsx`, `internal/ui/src/components/button.tsx` | Extracted `AnimatedLoadingSpinner` to its own module and updated imports accordingly. |
| `apps/dashboard/app/(app)/apis/[apiId]/_components/rbac-dialog-content.tsx`, `apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx`, `apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx` | Replaced imports of `AnimatedLoadingSpinner` with `Loading` from `@unkey/ui` and updated usage accordingly. |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant AppComponent
participant UI_Library as @unkey/ui
AppComponent->>UI_Library: import { Loading }
AppComponent->>AppComponent: <Button loading={isLoading}>Label</Button>
Note right of AppComponent: Button shows spinner via loading prop (no manual <Loading />)Possibly related PRs
Suggested labels
Suggested reviewers
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
MichaelUnkey
requested review from
perkinsjr,
chronark,
mcstepp and
ogzhanolguncu
as code owners
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
internal/ui/src/components/loading.tsx (1)
1-1: Improve the biome-ignore comment specificity.The biome-ignore comment could be more specific about which rule is being ignored and why.
-// biome-ignore lint: React in this context is used throughout, so biome will change to types because no APIs are used even though React is needed. +// biome-ignore lint/correctness/noUnusedImports: React is required for JSX transformationapps/engineering/content/design/components/loading.mdx (1)
43-49: Consider adding browser compatibility information.The props table is accurate and well-formatted. Consider adding a note about SVG animation browser support since this component relies on SVG
<animate>elements.Add a browser compatibility section:
+## Browser Compatibility + +This component uses SVG animations (`<animate>` elements) which are supported in all modern browsers. For older browser support, consider using CSS animations as a fallback. +
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (51)
apps/dashboard/app/(app)/[...not-found]/page.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/credits-setup.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/metadata-setup.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/logs-table.tsx(1 hunks)apps/dashboard/app/(app)/apis/[apiId]/settings/components/delete-protection.tsx(1 hunks)apps/dashboard/app/(app)/authorization/permissions/[permissionId]/settings-client.tsx(1 hunks)apps/dashboard/app/(app)/authorization/roles/[roleId]/settings-client.tsx(1 hunks)apps/dashboard/app/(app)/identities/[identityId]/page.tsx(1 hunks)apps/dashboard/app/(app)/logs/components/table/logs-table.tsx(1 hunks)apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx(1 hunks)apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/logs-table.tsx(1 hunks)apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/logs-table.tsx(1 hunks)apps/dashboard/app/(app)/settings/billing/client.tsx(1 hunks)apps/dashboard/app/(app)/settings/billing/page.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/new/client.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/client.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/invitations.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/invite.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/members.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/role-switcher.tsx(1 hunks)apps/dashboard/app/(app)/settings/vercel/client.tsx(1 hunks)apps/dashboard/app/(app)/settings/vercel/loading.tsx(1 hunks)apps/dashboard/app/(app)/settings/vercel/page.tsx(1 hunks)apps/dashboard/app/auth/sign-in/[[...sign-in]]/page.tsx(1 hunks)apps/dashboard/app/auth/sign-in/email-code.tsx(1 hunks)apps/dashboard/app/auth/sign-in/email-signin.tsx(1 hunks)apps/dashboard/app/auth/sign-in/email-verify.tsx(1 hunks)apps/dashboard/app/auth/sign-in/oauth-signin.tsx(1 hunks)apps/dashboard/app/auth/sign-up/[[...sign-up]]/page.tsx(1 hunks)apps/dashboard/app/auth/sign-up/email-code.tsx(1 hunks)apps/dashboard/app/auth/sign-up/email-signup.tsx(1 hunks)apps/dashboard/app/auth/sign-up/oauth-signup.tsx(1 hunks)apps/dashboard/app/integrations/vercel/callback/client.tsx(1 hunks)apps/dashboard/app/integrations/vercel/callback/loading.tsx(1 hunks)apps/dashboard/app/integrations/vercel/callback/workspace.tsx(1 hunks)apps/dashboard/app/new/create-api.tsx(1 hunks)apps/dashboard/app/new/create-workspace.tsx(1 hunks)apps/dashboard/app/new/keys.tsx(1 hunks)apps/dashboard/components/dashboard/api-key-table/index.tsx(1 hunks)apps/dashboard/components/dashboard/api-key-table/table.tsx(1 hunks)apps/dashboard/components/dashboard/feedback-component.tsx(1 hunks)apps/dashboard/components/dashboard/loading.tsx(0 hunks)apps/dashboard/components/dashboard/root-key-table/index.tsx(1 hunks)apps/dashboard/components/dashboard/root-key-table/table.tsx(1 hunks)apps/dashboard/components/navigation/sidebar/team-switcher.tsx(1 hunks)apps/dashboard/components/opt-in.tsx(1 hunks)apps/engineering/content/design/components/loading.mdx(1 hunks)apps/engineering/content/design/components/loading/loading.example.tsx(1 hunks)internal/ui/src/components/loading.tsx(1 hunks)internal/ui/src/index.ts(1 hunks)
💤 Files with no reviewable changes (1)
- apps/dashboard/components/dashboard/loading.tsx
🔇 Additional comments (52)
apps/dashboard/app/(app)/[...not-found]/page.tsx (1)
1-1: Consolidated imports for UI components: GroupingButtonandEmptyinto a single import from@unkey/uienhances consistency and reduces import clutter.apps/dashboard/app/auth/sign-in/email-verify.tsx (1)
8-8: Replaced localLoadingimport with shared UI library: Switching to the centralizedLoadingcomponent from@unkey/uiensures uniform styling and behavior across the application.apps/dashboard/app/auth/sign-in/email-code.tsx (1)
5-5: Switched to centralizedLoadingcomponent: ImportingLoadingfrom@unkey/uialigns this file with the global UI toolkit and promotes reuse.apps/dashboard/app/auth/sign-in/[[...sign-in]]/page.tsx (1)
4-4: StandardizedLoadingimport from UI library: Good replacement of the local loader with the sharedLoadingcomponent from@unkey/uifor consistency.apps/dashboard/components/navigation/sidebar/team-switcher.tsx (1)
20-20: Replaced local loader with shared UI component: ImportingLoadingfrom@unkey/uimaintains a consistent loading indicator across the dashboard.apps/dashboard/app/auth/sign-in/oauth-signin.tsx (1)
6-6:✅ Verification successful
Imported centralized
Loadingcomponent
Replaced the local loading indicator import with the sharedLoadingfrom@unkey/ui. Ensure that@unkey/uiis declared as a dependency inapps/dashboard/package.jsonand that the version you’re using supports theclassNameprop.Run this script to verify no residual local imports remain:
🏁 Script executed:
#!/bin/bash # Verify no leftover local loading imports in the dashboard app rg -n "components/dashboard/loading"Length of output: 36
🏁 Script executed:
#!/bin/bash FILE="apps/dashboard/package.json" if [ -f "$FILE" ]; then echo "📦 Checking '@unkey/ui' in $FILE" grep -n '"@unkey/ui"' "$FILE" || echo "⚠️ @unkey/ui is not declared in dependencies" echo echo "🔍 Extracting version for '@unkey/ui':" python3 - << 'EOF' import json, sys try: pj = json.load(open("apps/dashboard/package.json")) ver = pj.get("dependencies", {}).get("@unkey/ui") print(ver if ver else "Not declared") except Exception as e: print(f"Error reading JSON: {e}", file=sys.stderr) EOF else echo "❌ File $FILE not found" fiLength of output: 412
🏁 Script executed:
#!/bin/bash echo "🔍 Searching for LoadingProps in UI package sources" rg -n "LoadingProps" -A3 echo echo "🔍 Searching for Loading component definitions" rg -n "function Loading" -A5 rg -n "const Loading" -A5Length of output: 6057
Review Approved: Centralized
LoadingImport Is Correct
- 📦 Confirmed
@unkey/uiis declared inapps/dashboard/package.json(line 59) asworkspace:^.- ✅ Verified
Loadingininternal/ui/src/components/loading.tsxextendsSVGProps<SVGSVGElement>, so it supports theclassNameprop.- 🔍 No residual local loading imports found in the dashboard app.
apps/dashboard/app/auth/sign-up/email-signup.tsx (1)
9-9:❓ Verification inconclusive
Switched to shared
Loadingcomponent
The local loading component import was replaced byLoadingfrom@unkey/ui. Confirm that the package is installed inapps/dashboard/package.jsonand that its API matches the usage here.To catch any forgotten local imports, run:
🏁 Script executed:
#!/bin/bash rg -n "components/dashboard/loading"Length of output: 36
🏁 Script executed:
#!/bin/bash # Verify that @unkey/ui is listed as a dependency in apps/dashboard/package.json rg -n '"@unkey/ui"' apps/dashboard/package.jsonLength of output: 84
Confirmed shared
Loadingimport
@unkey/uiis declared inapps/dashboard/package.jsonand no localcomponents/dashboard/loadingimports remain. Please verify that theLoadingcomponent’s API in@unkey/ui(props, styling, loading behavior) aligns with how it’s used below:• File:
apps/dashboard/app/auth/sign-up/email-signup.tsx
– Check that all passed props and expected rendering match@unkey/ui’sLoadingimplementation.apps/dashboard/app/integrations/vercel/callback/workspace.tsx (1)
24-24:✅ Verification successful
Replaced local loading indicator with shared component
ImportingLoadingfrom@unkey/uicentralizes the loader. Ensure yourapps/dashboardproject has the correct@unkey/uiversion installed and that the default sizing works as expected here.Quick scan for any stray local imports:
🏁 Script executed:
#!/bin/bash rg -n "components/dashboard/loading"Length of output: 36
Here’s a deeper check to be sure no local loader remains and that
@unkey/uiis declared in your dashboard app:
🏁 Script executed:
#!/bin/bash # 1. Find any Import of Loading outside of @unkey/ui echo "Scanning for stray Loading imports not from @unkey/ui…" rg -n "import.*Loading" -g "*.tsx" -g "*.ts" | grep -v "@unkey/ui" || echo "✔️ No stray Loading imports found" # 2. Locate dashboard package.json(s) and verify @unkey/ui version echo -e "\nVerifying @unkey/ui in dashboard package.json:" PACKAGE_FILES=$(fd -t f package.json | grep "apps/dashboard") for P in $PACKAGE_FILES; do echo "— $P —" rg -n '"@unkey/ui"' "$P" || echo "⚠️ @unkey/ui not declared in $P" doneLength of output: 1165
Let’s narrow the search to only the
Loadingimport and ignore other similarly named components:
🏁 Script executed:
#!/bin/bash echo "Scanning for any `import { Loading }` not from `@unkey/ui`…" rg -n "import\s*{\s*Loading\s*}" -g "*.tsx" -g "*.ts" | grep -v "@unkey/ui" || echo "✔️ No stray Loading imports found"Length of output: 580
No issues found with
Loadingimport or dependency
Scans confirm there are no stray localLoadingimports and@unkey/uiis declared inapps/dashboard/package.json. Approving these changes.apps/dashboard/app/auth/sign-up/email-code.tsx (1)
8-8:❓ Verification inconclusive
Switched import to shared
Loadingcomponent
The local loading component has been replaced by the one from@unkey/ui. Please verify that@unkey/uiis listed in yourapps/dashboarddependencies and that its API supports the given props.To ensure no local imports remain:
🏁 Script executed:
#!/bin/bash rg -n "components/dashboard/loading"Length of output: 36
🏁 Script executed:
#!/bin/bash # Verify @unkey/ui is listed as a dependency in apps/dashboard/package.json rg -n '"@unkey/ui"' apps/dashboard/package.json # Show how Loading is used in the sign-up form to confirm supported props rg -n 'Loading' -n apps/dashboard/app/auth/sign-up/email-code.tsxLength of output: 473
Confirm
LoadingComponent API and Dependencies
@unkey/uiis declared in apps/dashboard/package.json at the workspace level.- email-code.tsx imports and uses
<Loading className="w-4 h-4 mr-2 animate-spin" />on line 127.Please verify that the
Loadingcomponent from@unkey/uisupports theclassNameprop (and any other props you’re passing). Also ensure no local loading component remains:rg -n "components/dashboard/loading"apps/dashboard/app/auth/sign-up/[[...sign-up]]/page.tsx (1)
3-3: LGTM! Import path correctly updated.The Loading component import has been successfully moved from the local dashboard path to the
@unkey/uipackage, aligning with the PR objective of centralizing UI components.apps/dashboard/app/auth/sign-in/email-signin.tsx (1)
2-2: LGTM! Import successfully migrated to UI package.The Loading component import has been correctly updated to use the centralized
@unkey/uipackage. The component usage on line 52 with custom styling appears to be maintained properly.apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/metadata-setup.tsx (1)
4-4: Good import consolidation!Consolidating the
ButtonandFormTextareaimports from@unkey/uiinto a single import statement improves code organization and readability.apps/dashboard/app/integrations/vercel/callback/loading.tsx (1)
1-1: LGTM! Loading component import successfully migrated.The import has been correctly updated to use the centralized Loading component from
@unkey/ui. The component usage remains unchanged, maintaining the expected loading page behavior.apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/credits-setup.tsx (1)
3-10: Excellent import consolidation!The multiline import statement for
@unkey/uicomponents is well-formatted and improves code organization. This consolidation makes it easier to see all UI dependencies at a glance and follows standard formatting conventions.apps/dashboard/app/(app)/identities/[identityId]/page.tsx (1)
19-19: Import consolidation looks good
GroupingButtonandCopyButtonfrom@unkey/uimatches their usage in this file and aligns with the broader import cleanup.apps/dashboard/app/(app)/settings/vercel/page.tsx (1)
14-14: Consolidated UI imports are correct
ImportingButtonandEmptytogether from@unkey/uialigns with the refactoring goal and matches all component usages.apps/dashboard/app/(app)/settings/root-keys/new/client.tsx (1)
5-5: Centralized Loading import is correct
Replacing the localLoadingwith the one from@unkey/ui, alongsideButtonandCopyButton, is consistent and covers all usages in this component.apps/dashboard/app/(app)/settings/billing/client.tsx (1)
6-6: Grouped @unkey/ui imports are accurate
ImportingButton,Empty, andSettingCardin one statement from@unkey/uiis consistent with the rest of the codebase and correctly reflects usage.apps/dashboard/app/(app)/authorization/permissions/[permissionId]/settings-client.tsx (1)
9-9: UI imports consolidated appropriately
GroupingButton,Input, andSettingCardinto a single import from@unkey/uifollows the updated pattern and matches component usage.apps/dashboard/app/(app)/ratelimits/[namespaceId]/_overview/components/table/logs-table.tsx (1)
11-11: LGTM! Clean import consolidation.The consolidation of UI component imports from
@unkey/uiinto a single statement improves code organization and readability.apps/dashboard/app/(app)/apis/[apiId]/settings/components/delete-protection.tsx (1)
7-7: LGTM! Consistent import consolidation.The UI component import consolidation aligns with the broader pattern across the codebase and improves code organization.
apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/logs-table.tsx (1)
10-10: LGTM! Import consolidation follows established pattern.The consolidation of UI component imports maintains consistency with the broader refactoring pattern and improves code maintainability.
apps/dashboard/app/(app)/authorization/roles/[roleId]/settings-client.tsx (1)
8-8: LGTM! Clean import consolidation.The consolidation of UI component imports from
@unkey/uiinto a single statement improves code organization and readability without affecting functionality.apps/dashboard/app/(app)/logs/components/table/logs-table.tsx (1)
9-9: LGTM! Import statement consolidation approved.The consolidation of
Button,Empty, andTimestampInfoimports from@unkey/uiinto a single statement follows the established pattern and improves code organization.apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/logs-table.tsx (1)
8-8: LGTM! Consistent import organization.The import consolidation follows the established pattern across the codebase and maintains consistency in organizing UI component imports from
@unkey/ui.apps/dashboard/app/(app)/settings/team/role-switcher.tsx (1)
7-7: LGTM! Successfully moved Loading component to UI package.This change achieves the main PR objective by importing the
Loadingcomponent from the centralized@unkey/uipackage instead of the local dashboard components. The usage remains unchanged, ensuring functionality is preserved while improving code organization.apps/dashboard/app/(app)/settings/billing/page.tsx (1)
6-6: Consolidated imports look good
The grouped import ofButton,Empty,Input, andSettingCardfrom@unkey/uialigns with the refactor and maintains clarity without duplicating import statements.apps/dashboard/app/new/keys.tsx (1)
16-16: Updated Loading import from UI package
Replacing the localLoadingcomponent import with the one from@unkey/uicentralizes the component usage and ensures consistency across the app.apps/dashboard/app/new/create-workspace.tsx (1)
18-18: Moved Loading component to UI library
ImportingLoadingfrom@unkey/uiinstead of a local module aligns with the new shared UI package and preserves the loading indicator behavior.internal/ui/src/index.ts (1)
9-9: Exported new Loading component
Adding theLoadingcomponent to the public exports exposes it for import from@unkey/ui, completing the migration of the loading indicator to the shared UI library.apps/dashboard/components/dashboard/feedback-component.tsx (1)
14-14: Switched Loading import to shared UI package
ImportingLoadingfrom@unkey/uireplaces the local version and enforces a consistent loader across dashboard components.apps/dashboard/app/new/create-api.tsx (1)
17-17: Consolidated Loading import with UI components
ImportingLoadingalongsideButtonfrom@unkey/uireplaces the local dashboard loading component, aligning with the refactor to centralize UI elements and maintain consistent behavior.apps/dashboard/app/(app)/settings/team/invitations.tsx (1)
14-14: Centralize UI imports from @unkey/ui
GroupingButton,Empty, andLoadingunder@unkey/uiremoves the localLoadingdependency and standardizes imports across the app settings. This matches the PR’s restructuring goal.apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx (1)
17-17: Move Loading component to UI library
By importingLoadingfrom@unkey/ui(withButton), the file no longer relies on the now-removed local loading component, ensuring consistency with the new centralized UI package.apps/dashboard/components/dashboard/root-key-table/index.tsx (1)
25-25: Standardize Loading import in root-key-table
Replacing the localLoadingimport with the one from@unkey/uiconsolidates UI dependencies and aligns this component with the broader refactor.apps/dashboard/components/dashboard/root-key-table/table.tsx (1)
43-43: Consolidated Loading import for data table actions
ImportingLoadingfrom@unkey/uialongsideButtonensures that the component uses the centralized loading indicator, removing the legacy local implementation.apps/dashboard/app/(app)/settings/vercel/loading.tsx (1)
1-1: LGTM! Import source updated correctly.The import change from local dashboard component to
@unkey/uipackage aligns perfectly with the PR objective of moving the loading component to the UI package.apps/dashboard/app/(app)/ratelimits/[namespaceId]/_components/identifier-dialog.tsx (1)
9-17: LGTM! Import consolidation improves code organization.Consolidating the
@unkey/uiimports into a single multiline statement improves readability and follows best practices for import organization.apps/dashboard/components/dashboard/api-key-table/table.tsx (1)
43-43:✅ Verification successful
LGTM! Loading import consolidated correctly.
Adding
Loadingto the existing@unkey/uiimport consolidates the component sources and aligns with the refactoring objective. The usage on line 122 should continue to work as expected.To ensure compatibility, verify that the new
Loadingcomponent from@unkey/uihas the same API as the previous local component:
🏁 Script executed:
#!/bin/bash # Verify Loading component usage patterns across the codebase echo "Checking Loading component usage patterns..." rg -A 2 -B 2 "<Loading" --type tsx --type tsLength of output: 173
🏁 Script executed:
#!/bin/bash echo "Searching usage of <Loading> across the repo..." rg "<Loading" -n . || true echo echo "Searching export definitions of Loading component..." rg -E "export (const|function) Loading" -n . || true echo echo "Locating any loading.tsx or loading.ts files..." fd -i loading.tsx || true fd -i loading.ts || true echo echo "Finding references to @unkey/ui package..." rg "@unkey/ui" -n . || trueLength of output: 38521
🏁 Script executed:
#!/bin/bash echo "Inspecting Loading component export and props in internal/ui/src/components/loading.tsx" rg -n "export .*Loading" internal/ui/src/components/loading.tsx || true echo echo "Inspecting LoadingProps interface:" rg -n "interface .*LoadingProps" internal/ui/src/components/loading.tsx || true echo echo "Printing first 200 lines of Loading component implementation:" sed -n '1,200p' internal/ui/src/components/loading.tsx || trueLength of output: 2022
LGTM – Loading API Compatibility Confirmed
The
Loadingcomponent from@unkey/uiexports:export function Loading({ width = 24, height = 24, dur = "0.75s", ...props }: LoadingProps): JSX.Elementwhere
LoadingPropsextendsSVGProps<SVGSVGElement>(includingclassName). This covers all existing usage patterns (<Loading />,className,width,height,dur, etc.) with no breaking changes.– No further action required; ready to merge.
apps/dashboard/app/(app)/settings/team/members.tsx (1)
16-16: LGTM! Import consolidation completed successfully.Consolidating
Button,Empty, andLoadingimports from@unkey/uiinto a single statement improves import organization and aligns with the refactoring objective. All component usages remain functionally identical.apps/dashboard/components/opt-in.tsx (3)
3-3: Approve import positioning fortoast.
Thetoastimport from@/components/ui/toasteris correctly grouped with other local utility imports and follows the established import ordering conventions.
5-5: Approve import ofPostHogEvent.
ImportingPostHogEventfrom@/providers/PostHogProviderhere ensures consistent analytics tagging within this component.
7-7: Approve consolidated UI imports includingLoading.
GroupingButton,Empty, and the newly externalizedLoadingunder@unkey/uireduces fragmentation and matches the standardized pattern across the codebase.apps/dashboard/app/(app)/settings/team/invite.tsx (1)
17-17: Approve consolidated UI imports.
CombiningButton,Select,SelectContent,SelectItem,SelectTrigger, andSelectValueinto a single import from@unkey/uiimproves readability and aligns with the broader import refactor.apps/dashboard/app/(app)/settings/vercel/client.tsx (1)
24-33: Approve grouped import of UI components.
The import block now correctly pullsButton,Empty,Loading, and allSelectvariants from@unkey/ui, replacing the old localLoadingimport and consolidating related imports. This enhances consistency and maintainability.apps/dashboard/app/(app)/settings/team/client.tsx (1)
6-8: Approve inclusion of core UI components.
MovingButton,Empty, andLoadinginto the single@unkey/uiimport streamlines dependencies and reflects the centralized UI library approach.apps/dashboard/app/integrations/vercel/callback/client.tsx (1)
13-21: Approve import consolidation from@unkey/ui.
The block importingButton,Loading, andSelect-related components from@unkey/uiproperly replaces scattered local imports and maintains a clean, unified import structure.internal/ui/src/components/loading.tsx (3)
5-8: Well-designed interface with proper TypeScript typing.The
LoadingPropsinterface correctly extendsSVGProps<SVGSVGElement>, providing full flexibility for SVG customization while adding the customdurprop with proper documentation.
14-21: Excellent accessibility and styling implementation.The component includes proper accessibility with
aria-label="Loading"and usesfill-currentclass for inheriting parent text color. The fixed viewBox "0 0 24 24" with customizable width/height will scale correctly.
22-42:❓ Verification inconclusive
Verify the complex animation timing coordination.
The animation timing creates a wave effect through carefully orchestrated delays. The timing relationships are:
- Circle 1: starts immediately, triggers others
- Circle 2: starts 0.6s before Circle 1 ends (creating overlap)
- Circle 3: starts 0.45s before Circle 1 ends, then triggers Circle 1 restart
This creates a continuous looping wave effect, but the complexity warrants verification.
🏁 Script executed:
#!/bin/bash # Description: Search for any existing SVG animation patterns or timing configurations # to ensure this implementation follows established patterns in the codebase # Search for other SVG animations in the codebase rg -A 10 -B 2 '<animate' --type tsx --type ts # Search for other loading components that might have similar timing rg -A 5 -B 5 'animate.*begin.*end' --type tsx --type tsLength of output: 161
Verify complex wave animation timing
The three
<animate>elements coordinate via staggeredbeginoffsets and ID-based triggers to create a looping wave effect. Since no other SVG animations with similar patterns were found in the codebase, please:
- Ensure the sequence (Circle 1: start; Circle 2: starts 0.6 s before Circle 1 ends; Circle 3: starts 0.45 s before Circle 1 ends, then restarts Circle 1) produces a smooth, continuous loop without visual stutter.
- Test the
Loadingcomponent interactively (e.g., in Storybook) at differentdurvalues to confirm timing consistency.- Consider adding a brief inline comment above the snippet to explain the offset relationships for future maintainers.
File:
internal/ui/src/components/loading.tsx
Lines: 22–42apps/engineering/content/design/components/loading/loading.example.tsx (1)
1-28: Comprehensive examples demonstrating key Loading component features.The three examples effectively showcase:
- Default usage with standard 24x24 size and 0.75s duration
- Custom animation speed (1s duration)
- Custom sizing (100x100 pixels)
These cover the primary customization scenarios developers would need.
apps/engineering/content/design/components/loading.mdx (1)
52-55: Excellent technical documentation of the animation implementation.The implementation details clearly explain how the SVG animations work and the accessibility considerations. This helps developers understand the underlying mechanism and customize if needed.
…ding-component-to-ui
…ding-component-to-ui
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
apps/engineering/content/design/components/loading.mdx (4)
13-19: Clean Up Usage Snippet
The snippet importsButtonfrom@unkey/uibut never uses it. Please remove the unusedButtonimport or update the example to demonstrate<Loading>within a<Button loading>scenario.
21-28: Expand or Prune Examples Section
Only<LoadingExample />is shown under “## Examples,” yet you’ve also imported two other example components. Consider adding subsections like “### With Custom Duration” and “### Custom SVG Settings” forLoadingWithDurationExampleandLoadingCustomExample, or remove their imports if they’re not needed.
33-38: Clarify Prop Naming
The prop nameduris concise but may be unclear to less familiar users. Consider renaming it todurationin both the component API and documentation, or add a brief note explaining thatdurstands for “duration.”
43-45: Grammar Tweak
Minor wording improvement: merge the two sentences in the Implementation Details for better flow. For example:The loading animation uses chained `<animate>` SVG elements to create a smooth wave-like effect and supports styling/accessibility via Tailwind CSS.🧰 Tools
🪛 LanguageTool
[uncategorized] ~43-~43: Possible missing comma found.
Context: ...ogether with precise timing to create a smooth wave-like effect. The component is bui...(AI_HYDRA_LEO_MISSING_COMMA)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
apps/dashboard/app/(app)/apis/[apiId]/settings/components/delete-protection.tsx(1 hunks)apps/dashboard/app/(app)/settings/billing/client.tsx(1 hunks)apps/dashboard/app/(app)/settings/billing/page.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx(1 hunks)apps/dashboard/app/(app)/settings/root-keys/new/client.tsx(2 hunks)apps/dashboard/app/(app)/settings/team/client.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/invite.tsx(1 hunks)apps/dashboard/app/(app)/settings/team/members.tsx(1 hunks)apps/dashboard/app/(app)/settings/vercel/client.tsx(2 hunks)apps/dashboard/app/auth/sign-in/email-signin.tsx(1 hunks)apps/dashboard/app/auth/sign-up/email-signup.tsx(1 hunks)apps/dashboard/app/integrations/vercel/callback/client.tsx(2 hunks)apps/dashboard/app/new/create-api.tsx(1 hunks)apps/dashboard/app/new/create-workspace.tsx(1 hunks)apps/dashboard/app/new/keys.tsx(2 hunks)apps/dashboard/components/dashboard/feedback-component.tsx(1 hunks)apps/dashboard/components/dashboard/root-key-table/index.tsx(1 hunks)apps/dashboard/components/dashboard/root-key-table/table.tsx(1 hunks)apps/dashboard/components/navigation/sidebar/team-switcher.tsx(1 hunks)apps/dashboard/components/opt-in.tsx(2 hunks)apps/engineering/content/design/components/loading.mdx(1 hunks)apps/engineering/content/design/components/loading/loading.example.tsx(1 hunks)internal/ui/src/components/loading.tsx(1 hunks)internal/ui/src/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (8)
- apps/dashboard/app/new/create-workspace.tsx
- apps/dashboard/app/(app)/apis/[apiId]/settings/components/delete-protection.tsx
- apps/dashboard/components/navigation/sidebar/team-switcher.tsx
- apps/dashboard/components/dashboard/feedback-component.tsx
- apps/dashboard/app/new/create-api.tsx
- apps/dashboard/app/(app)/settings/team/invite.tsx
- apps/dashboard/app/(app)/settings/team/client.tsx
- apps/dashboard/app/(app)/settings/root-keys/new/client.tsx
🚧 Files skipped from review as they are similar to previous changes (15)
- apps/dashboard/app/auth/sign-up/email-signup.tsx
- apps/dashboard/app/auth/sign-in/email-signin.tsx
- internal/ui/src/index.ts
- apps/dashboard/app/new/keys.tsx
- apps/dashboard/app/integrations/vercel/callback/client.tsx
- apps/dashboard/components/dashboard/root-key-table/table.tsx
- apps/dashboard/app/(app)/settings/billing/page.tsx
- apps/dashboard/app/(app)/settings/billing/client.tsx
- apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx
- apps/dashboard/components/dashboard/root-key-table/index.tsx
- apps/dashboard/app/(app)/settings/vercel/client.tsx
- apps/dashboard/app/(app)/settings/team/members.tsx
- apps/dashboard/components/opt-in.tsx
- internal/ui/src/components/loading.tsx
- apps/engineering/content/design/components/loading/loading.example.tsx
🧰 Additional context used
🪛 LanguageTool
apps/engineering/content/design/components/loading.mdx
[uncategorized] ~43-~43: Possible missing comma found.
Context: ...ogether with precise timing to create a smooth wave-like effect. The component is bui...
(AI_HYDRA_LEO_MISSING_COMMA)
⏰ Context from checks skipped due to timeout of 90000ms (14)
- GitHub Check: Test Go API Local / Test (Shard 8/8)
- GitHub Check: Test Go API Local / Test (Shard 4/8)
- GitHub Check: Test Go API Local / Test (Shard 7/8)
- GitHub Check: Test Go API Local / Test (Shard 6/8)
- GitHub Check: Test Go API Local / Test (Shard 2/8)
- GitHub Check: Test Go API Local / Test (Shard 3/8)
- GitHub Check: Test Go API Local / Test (Shard 5/8)
- GitHub Check: Test Go API Local / Test (Shard 1/8)
- GitHub Check: Build / Build
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: Test Packages / Test ./internal/id
- GitHub Check: Test Packages / Test ./internal/billing
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
apps/engineering/content/design/components/loading.mdx (1)
1-4: Frontmatter Validation
The YAML frontmatter is correctly formatted withtitleanddescriptionfields enclosed by---.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/engineering/content/design/components/loading.mdx (2)
13-19: Remove UnusedButtonImport
The snippet importsButtonfrom@unkey/uibut only demonstrates<Loading />. Consider removingButtonto avoid confusion, or adjust the example to showcase theloadingprop onButton.
41-45: Implementation Details Clarity
The description of the SVG animation is concise. Optionally, you could link to any ARIA attributes or accessibility notes if the component exposes them.🧰 Tools
🪛 LanguageTool
[uncategorized] ~43-~43: Possible missing comma found.
Context: ...ogether with precise timing to create a smooth wave-like effect. The component is bui...(AI_HYDRA_LEO_MISSING_COMMA)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/engineering/content/design/components/loading.mdx(1 hunks)internal/ui/src/components/loading.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- internal/ui/src/components/loading.tsx
🧰 Additional context used
🪛 LanguageTool
apps/engineering/content/design/components/loading.mdx
[uncategorized] ~43-~43: Possible missing comma found.
Context: ...ogether with precise timing to create a smooth wave-like effect. The component is bui...
(AI_HYDRA_LEO_MISSING_COMMA)
⏰ Context from checks skipped due to timeout of 90000ms (16)
- GitHub Check: Test Go API Local / Test (Shard 8/8)
- GitHub Check: Test Go API Local / Test (Shard 7/8)
- GitHub Check: Test Go API Local / Test (Shard 6/8)
- GitHub Check: Test Go API Local / Test (Shard 4/8)
- GitHub Check: Test Go API Local / Test (Shard 5/8)
- GitHub Check: Test Go API Local / Test (Shard 3/8)
- GitHub Check: Test Go API Local / Test (Shard 2/8)
- GitHub Check: Test Go API Local / Test (Shard 1/8)
- GitHub Check: Build / Build
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Packages / Test ./packages/nextjs
- GitHub Check: Test Packages / Test ./packages/hono
- GitHub Check: Test Packages / Test ./packages/cache
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: Test Packages / Test ./internal/keys
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (5)
apps/engineering/content/design/components/loading.mdx (5)
1-4: Valid Front Matter
The YAML front matter correctly defines thetitleanddescriptionmetadata for this MDX page.
21-24: Examples Section Usage
Embedding<LoadingExample />provides a hands-on showcase of the component. Verify that the example covers the default state, custom color, and duration variants as expected.
25-28: Custom Color Explanation
The note on using thefill-currentclass to inherit text color is clear and accurate.
29-38: Props Table Accuracy
The props table correctly listswidth,height, anddurwith their types and default values, matching the component implementation.
5-5:✅ Verification successful
Verify Example Import Path
Ensure that theLoadingExamplecomponent exists atapps/engineering/content/design/components/loading/loading.example.tsxso that the import in this MDX does not break.
🏁 Script executed:
#!/bin/bash # Verify LoadingExample file exists test -f apps/engineering/content/design/components/loading/loading.example.tsx || echo "ERROR: Missing LoadingExample component"Length of output: 80
Import Path Verified
TheLoadingExamplecomponent was found atapps/engineering/content/design/components/loading/loading.example.tsx. No changes are needed.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
internal/ui/src/components/animated-loading-spinner.tsx (1)
76-90: Consider extracting SVG paths to a constants file.The hardcoded SVG paths work correctly but could be moved to a separate constants file for better maintainability and potential reuse.
+// In a separate constants file +export const SPINNER_SEGMENT_PATHS = [ + "M13.162,3.82c-...", // segment paths + // ... rest of paths +]; + // In this file -function getPathForSegment(index: number) { - const paths = [ - "M13.162,3.82c-...", - // ... all paths - ]; - return paths[index]; -} +import { SPINNER_SEGMENT_PATHS } from './constants'; + +function getPathForSegment(index: number) { + return SPINNER_SEGMENT_PATHS[index]; +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/dashboard/app/(app)/apis/[apiId]/_components/rbac-dialog-content.tsx(2 hunks)apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx(2 hunks)apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx(2 hunks)apps/engineering/content/design/components/loading.mdx(1 hunks)apps/engineering/content/design/components/loading/loading.example.tsx(1 hunks)internal/ui/src/components/animated-loading-spinner.tsx(1 hunks)internal/ui/src/components/button.tsx(1 hunks)internal/ui/src/components/loading.tsx(1 hunks)internal/ui/src/index.ts(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/override-indicator.tsx
- apps/dashboard/app/(app)/apis/[apiId]/_components/rbac-dialog-content.tsx
- apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/_components/components/table/keys-list.tsx
- internal/ui/src/components/button.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- internal/ui/src/index.ts
🧰 Additional context used
🧬 Code Graph Analysis (3)
apps/engineering/content/design/components/loading/loading.example.tsx (2)
apps/engineering/app/components/render.tsx (1)
RenderComponentWithSnippet(12-67)internal/ui/src/components/loading.tsx (1)
Loading(12-16)
internal/ui/src/components/loading.tsx (1)
internal/ui/src/components/animated-loading-spinner.tsx (1)
AnimatedLoadingSpinner(11-74)
internal/ui/src/components/animated-loading-spinner.tsx (2)
apps/dashboard/lib/utils.ts (1)
cn(5-7)apps/dashboard/components/navigation/sidebar/app-sidebar/components/nav-items/utils.ts (1)
getPathForSegment(13-25)
⏰ Context from checks skipped due to timeout of 90000ms (22)
- GitHub Check: Test Go API Local / Test (Shard 6/8)
- GitHub Check: Test Go API Local / Test (Shard 8/8)
- GitHub Check: Test Go API Local / Test (Shard 5/8)
- GitHub Check: Test Go API Local / Test (Shard 7/8)
- GitHub Check: Test Go API Local / Test (Shard 2/8)
- GitHub Check: Test Go API Local / Test (Shard 4/8)
- GitHub Check: Test Go API Local / Test (Shard 3/8)
- GitHub Check: Test Go API Local / Test (Shard 1/8)
- GitHub Check: Build / Build
- GitHub Check: Test API / API Test Local
- GitHub Check: Test Packages / Test ./internal/clickhouse
- GitHub Check: Test Packages / Test ./packages/nextjs
- GitHub Check: Test Packages / Test ./packages/hono
- GitHub Check: Test Packages / Test ./packages/cache
- GitHub Check: Test Packages / Test ./packages/rbac
- GitHub Check: Test Packages / Test ./internal/encryption
- GitHub Check: Test Packages / Test ./internal/keys
- GitHub Check: Test Packages / Test ./internal/resend
- GitHub Check: Test Packages / Test ./packages/api
- GitHub Check: Test Packages / Test ./internal/id
- GitHub Check: Test Packages / Test ./internal/billing
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (8)
apps/engineering/content/design/components/loading/loading.example.tsx (2)
5-13: LGTM! Clean default example.The example demonstrates the basic usage of the Loading component with proper centering and spacing.
15-25: LGTM! Good customization example.The example effectively demonstrates customizing the Loading component with different size and animation duration. The cyan color styling on the parent div will correctly inherit to the spinner via
currentColor.internal/ui/src/components/loading.tsx (2)
6-10: Well-designed interface with proper TypeScript typing.The LoadingProps interface properly extends SVGProps and adds the specific props needed for the loading spinner customization.
12-16: Clean wrapper implementation with appropriate defaults.The component effectively wraps AnimatedLoadingSpinner with sensible defaults (size=24, dur=125) and proper prop forwarding.
internal/ui/src/components/animated-loading-spinner.tsx (3)
30-37: Solid animation implementation with proper cleanup.The useEffect correctly manages the interval timer with proper cleanup and dependency array. The modulo operation ensures smooth cycling through segments.
49-66: Excellent opacity calculation for smooth visual effect.The opacity calculation creates a nice fading trail effect by using distance from the current segment index. The smooth transition and currentColor usage are well implemented.
3-3:✅ Verification successful
Verify the import path for the cn utility.
The import path
../lib/utilsmay not be correct for the UI package structure. Please ensure this path resolves correctly.
🏁 Script executed:
#!/bin/bash # Check if the utils file exists at the specified path relative to this component fd -t f utils.ts internal/ui/src/lib/ fd -t f utils.js internal/ui/src/lib/Length of output: 108
Import path is correct, no changes needed
The import in
internal/ui/src/components/animated-loading-spinner.tsx:import { cn } from "../lib/utils";correctly resolves to
internal/ui/src/lib/utils.ts. No action required.apps/engineering/content/design/components/loading.mdx (1)
50-56: LGTM! Good accessibility documentation.The accessibility section covers important considerations including ARIA attributes, visual feedback, and contrast ratios.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…ding-component-to-ui
…eyed/unkey into Move-loading-component-to-ui
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/engineering/content/design/components/loading.mdx (2)
15-16: Remove unused import
The usage snippet importsButtonbut never uses it, which may trigger lint warnings and confuse readers. Consider removing it:-import { Loading, Button } from "@unkey/ui"; +import { Loading } from "@unkey/ui";
43-48: Clarify optional props in table
It’s clearer to mark optional props with?and use a more conventional default forclassName(e.g., an empty string):-| `className` | `string` | `undefined` | Additional CSS classes to apply | +| `className?` | `string` | `''` | Additional CSS classes to apply |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/engineering/content/design/components/loading.mdx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Test Go API Local / Test (Shard 5/8)
- GitHub Check: Test Go API Local / Test (Shard 3/8)
- GitHub Check: Test Go API Local / Test (Shard 1/8)
- GitHub Check: Test Go API Local / Test (Shard 2/8)
- GitHub Check: Test Go API Local / Test (Shard 4/8)
- GitHub Check: Build / Build
- GitHub Check: Test API / API Test Local
🔇 Additional comments (2)
apps/engineering/content/design/components/loading.mdx (2)
9-10: Accurate component description
The updated description correctly reflects that the loader is an 8-segment spinner instead of three circles.
5-6:✅ Verification successful
Verify example imports
Confirm that the fileapps/engineering/content/design/components/loading/loading.exampleexports bothLoadingExampleandCustomSizeAndDuration.
🏁 Script executed:
#!/usr/bin/env bash # Verify that the example file exports the required components rg -Hn "export.*LoadingExample|export.*CustomSizeAndDuration" apps/engineering/content/design/components/loading/loading.example*Length of output: 358
✔️ Example imports are valid
The fileapps/engineering/content/design/components/loading/loading.example.tsxexports bothLoadingExampleandCustomSizeAndDuration, so the import inapps/engineering/content/design/components/loading.mdxis correct.
What does this PR do?
Fixes # (issue)
If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists
Type of change
How should this be tested?
Loading components still work as intended
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
Documentation
Refactor
Style