Add loading skeletons to project sections #81
Conversation
|
Caution Review failedThe pull request is closed. Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds loading skeletons and explicit empty states for projects. Introduces isLoading/isLoadingProjects flags, renders Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant PP as ProjectsPage.vue
participant API as Projects API
U->>PP: Navigate to Projects
activate PP
note right of PP #D3E4FF: isLoadingProjects = true\nrender skeletons
PP->>API: fetch profile & projects (Promise.all)
API-->>PP: results or error
note right of PP #FFF4D6: finally: isLoadingProjects = false
alt projects.length > 0
PP-->>U: Render ProjectCardPartial list
else no projects
PP-->>U: Render empty-state message
end
deactivate PP
sequenceDiagram
autonumber
participant U as User
participant FP as FeaturedProjectsPartial.vue
participant API as Projects API
U->>FP: Mount component
activate FP
note right of FP #D3E4FF: isLoading = true\nshow two skeletons
FP->>API: fetch projects
API-->>FP: projects or error
note right of FP #FFF4D6: finally: isLoading = false
alt has >=1 projects
FP-->>U: Render first two ProjectCardPartial
else none
FP-->>U: Render fallback message
end
deactivate FP
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10–15 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (7)
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 |
Summary of ChangesHello @gocanto, I'm Gemini Code Assist1! 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 enhances the user experience by integrating loading skeletons across the project display sections. This change provides immediate visual feedback to users while project data is being loaded, preventing blank screens and indicating that content is on its way. It also includes clear messages for scenarios where no projects are available. Highlights
Using Gemini Code AssistThe 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
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 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
|
![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 effectively adds loading skeletons to the project sections, improving the user experience by providing visual feedback while data is being fetched. A reusable ProjectCardSkeletonPartial component has been created for this purpose. The implementation in both ProjectsPage.vue and FeaturedProjectsPartial.vue correctly uses a loading state to conditionally render the skeletons, the project cards, or a fallback message.
My review includes a few suggestions to enhance the layout consistency. Specifically, I've pointed out that the fallback messages should span the full width of their grid containers and that the skeleton loaders in the featured projects section should match the rotation of the actual project cards to prevent layout shifts.
| <!-- Cards --> | ||
| <div class="grid sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2 gap-5"> | ||
| <template v-if="isLoading"> | ||
| <ProjectCardSkeletonPartial v-for="index in 2" :key="`featured-project-skeleton-${index}`" /> |
There was a problem hiding this comment.
The actual project cards in this section have a slight rotation applied using odd:-rotate-1 even:rotate-1 classes. To prevent a layout shift when the projects load, the skeleton placeholders should have the same rotation effect. You can achieve this by passing the rotation classes to the ProjectCardSkeletonPartial component.
<ProjectCardSkeletonPartial v-for="index in 2" :key="`featured-project-skeleton-${index}`" class="odd:-rotate-1 even:rotate-1" />
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/ProjectsPage.vue(4 hunks)src/partials/FeaturedProjectsPartial.vue(1 hunks)src/partials/ProjectCardSkeletonPartial.vue(1 hunks)
🔇 Additional comments (7)
src/partials/FeaturedProjectsPartial.vue (3)
7-9: LGTM! Skeleton loading implementation is clean.The skeleton loading state correctly renders two placeholder cards during data fetch, matching the expected number of featured projects.
55-68: LGTM! Loading state management is properly implemented.The isLoading flag is correctly initialized to true, data is fetched in onMounted, and the loading state is reliably cleared in the finally block regardless of success or failure.
41-41: LGTM! Empty state message is user-friendly.The fallback message appropriately informs users when no projects are available.
src/pages/ProjectsPage.vue (4)
34-36: LGTM! Skeleton count is appropriate for the full projects page.Rendering four skeleton cards matches the typical grid layout for a full project listing page, providing a better loading experience than the featured section's two cards.
37-40: LGTM! Conditional rendering logic is correct.The template properly handles all three states: loading, projects available, and empty state with clear user feedback.
81-81: LGTM! Loading state variable is appropriately named.Using
isLoadingProjectsinstead of justisLoadingprovides better clarity in a page component that may load multiple data sources.
103-117: LGTM! Loading state management is properly implemented with Promise.all.The implementation correctly:
- Fetches both profile and projects in parallel using Promise.all
- Handles errors gracefully
- Ensures loading state is cleared in the finally block regardless of outcome
gocanto
force-pushed
the
codex/build-loading-skeleton-for-project-sections
branch
from
9098009 to
d27db2d
Compare
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68db9ab1b8e083339361d8c6c2f432da
Summary by CodeRabbit
New Features
Style