🎨 Palette: Standardize loading spinners across multiple pages#889
🎨 Palette: Standardize loading spinners across multiple pages#889is0692vs wants to merge 2 commits into
Conversation
Release: staging -> main (2026-05-21 07:43)
Co-authored-by: is0692vs <135803462+is0692vs@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
Warning Review limit reached
Your plan currently allows 1 review/hour. Refill in 56 minutes and 8 seconds. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more review capacity refills, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (10)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
このリポジトリでは staging 先行フローを採用しています。PR のターゲットを |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| ## 2026-05-21 - Invite Action UX Improvement | ||
| **Learning:** 非同期のアクション（招待の承認・拒否など）において、ボタンを押した後にレスポンスが返るまでの間、処理中であることを明示するために `<Spinner />` を表示しボタンを非活性（disabled）にすることが UX/アクセシビリティ観点で重要です。また、成功時・失敗時それぞれに `toast.success` と `toast.error` を用いて明確な結果のフィードバックを行うことで、ユーザー体験が大きく向上します。 | ||
| **Action:** 今後リスト内の各アイテムに対して非同期アクションを実行する際は、該当する `id` と `action` の種類を状態として保持し、ローディングとフィードバックの UX パターンを適用します。 | ||
| ## 2024-05-24 - Spinner Component Usage |
There was a problem hiding this comment.
2024 になっていますが、現在は 2026 年です。他のエントリ（例: 2026-05-21）と統一するため、修正が必要です。
| ## 2024-05-24 - Spinner Component Usage | |
| ## 2026-05-24 - Spinner Component Usage |
Prompt To Fix With AI
This is a comment left during a code review.
Path: .Jules/palette.md
Line: 25
Comment:
パレットログの年号が `2024` になっていますが、現在は 2026 年です。他のエントリ（例: `2026-05-21`）と統一するため、修正が必要です。
```suggestion
## 2026-05-24 - Spinner Component Usage
```
How can I resolve this? If you propose a fix, please make it concise.
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request refactors several pages to use the shared component instead of inline HTML for loading states, ensuring consistency across the application. Corresponding test files were updated to use the specific CSS selector required by the new component, and a new entry was added to the palette documentation to record this standard. I have no feedback to provide as there were no review comments to assess.
1 participant
💡 What: The inline loading spinners (raw HTML with
.animate-spinclasses) inupload/page.tsx,settings/page.tsx,collections/new/page.tsx,papers/[id]/edit/page.tsx, andorgs/new/page.tsxwere replaced with the shared<Spinner />component. Associated tests were also updated to query for the correct selector[aria-hidden="true"].motion-safe\:animate-spin.🎯 Why: Using a shared component for loading states ensures visual consistency across the application and makes future updates to the spinner easier to manage.
📸 Before/After: Visually identical, but cleaner code under the hood.
♿ Accessibility: No direct changes, but standardizes the
aria-hidden="true"behavior applied within the<Spinner />component.PR created automatically by Jules for task 16286244941977723172 started by @is0692vs
Greptile Summary
5つのページ（
upload、settings、collections/new、papers/[id]/edit、orgs/new）でインラインのローディングスピナー実装を共通の<Spinner />コンポーネントに統一したリファクタリングPRです。関連するテストもmotion-safe:animate-spinセレクタに合わせて更新されています。animate-spinからmotion-safe:animate-spinへの変更により、prefers-reduced-motion設定を尊重するアクセシビリティ改善が副次的に導入されています。upload/page.tsxでは元の実装にaria-hidden="true"がなかったため、<Spinner />適用後に新たに付与されます（アクセシビリティ上は改善）。なお、対応するテストファイルは PR 以前から存在しません。Confidence Score: 4/5
スピナーの置き換えは全ページで機能的に同等であり、テストも適切に更新されています。マージしても問題ありません。
変更はすべて機械的なコンポーネント置き換えで、ロジックへの影響はありません。
.Jules/palette.mdの年号タイポが唯一の指摘事項で、コード動作には無影響です。.Jules/palette.mdの年号修正のみ確認が必要です。Important Files Changed
2024-05-24と誤っており、正しくは2026-05-24。animate-spinスパンを<Spinner />に置換。元の実装にはaria-hidden="true"がなかったが、Spinner コンポーネントにより付与されるためアクセシビリティ的には改善。テストファイルが存在しないため、スピナーのテストカバレッジなし（PR 以前から未存在）。<Spinner />に置換。テストも同様に更新済み。問題なし。<Spinner />に置換。テストも更新済み。問題なし。<Spinner />に置換。テストも更新済み。問題なし。<Spinner />に置換。テストも更新済み。問題なし。.animate-spinからmotion-safe\:animate-spinに更新。Spinner コンポーネントの DOM 構造に合致。motion-safe\:animate-spinに更新。問題なし。motion-safe\:animate-spinに更新。問題なし。motion-safe\:animate-spinに更新。問題なし。Flowchart
%%{init: {'theme': 'neutral'}}%% flowchart TD A[ユーザーがフォーム送信] --> B{submitting / saving / uploading} B -- true --> C["<Spinner /> を表示\n(motion-safe:animate-spin, aria-hidden=true)"] B -- true --> D[ボタンテキスト: ローディング中...] B -- false --> E[ボタンテキスト: 通常ラベル] C --> F[ボタン disabled=true] D --> F F --> G[API レスポンス待機] G --> H[submitting=false] H --> I[スピナー非表示 / ボタン再活性化] subgraph 共通SpinnerComponent C endPrompt To Fix All With AI
Reviews (1): Last reviewed commit: "🎨 Palette: Replace inline loading spinn..." | Re-trigger Greptile