Add skeleton placeholder for article thumbnails #77
Conversation
|
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. WalkthroughRefactors ArticleItemPartial.vue to replace an inline Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant ArticleItem as ArticleItemPartial.vue
participant Img as <img>
participant UI as Skeleton / Error UI
User->>ArticleItem: render item
ArticleItem->>ArticleItem: watch(props.item.cover_image_url) (immediate)\nset imageStatus = loading
ArticleItem->>UI: show skeleton (showSkeleton = true)
ArticleItem->>Img: render <img loading="lazy"> (hidden/transparent)
alt Image loads
Img-->>ArticleItem: load event
ArticleItem->>ArticleItem: imageStatus = loaded
ArticleItem->>UI: hide skeleton
ArticleItem->>Img: reveal image (opacity transition)
else Image fails
Img-->>ArticleItem: error event
ArticleItem->>ArticleItem: imageStatus = error
ArticleItem->>UI: show error SVG overlay
ArticleItem->>Img: remain hidden
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
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. 🧪 Early access (Sonnet 4.5): enabledWe are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience. Note:
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 significantly enhances the user experience and performance related to article thumbnail images. By introducing skeleton loading, users will see a consistent layout while images are fetched. It also gracefully handles image loading failures with a clear fallback icon and optimizes resource usage through lazy loading, ensuring a smoother and more efficient browsing experience. 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 introduces a skeleton loader for article thumbnails, which is a great enhancement for user experience. The implementation correctly handles loading, success, and error states, and adds lazy loading to improve initial page load performance. My review includes a few suggestions to improve code clarity and maintainability, such as simplifying a complex class binding, using a more intuitive icon for errors, and making the state management logic easier to understand.
![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 (1)
src/partials/ArticleItemPartial.vue (1)
21-33: Consider a more appropriate error icon and add accessibility attributes.The magnifying glass icon (search/zoom icon) doesn't clearly communicate an image loading failure. Consider using a broken image icon, exclamation mark, or photo placeholder icon instead.
Additionally, the error SVG lacks accessibility attributes. Add
aria-labelorrole="img"witharia-labelto describe the error state for screen reader users.Apply this diff to use a broken image icon and add accessibility:
<svg v-if="imageError" class="w-6 h-6 text-slate-400 dark:text-slate-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" + role="img" + aria-label="Image failed to load" > - <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /> + <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" /> </svg>This uses the Heroicons "photo" icon which better represents an image placeholder.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/partials/ArticleItemPartial.vue(2 hunks)
🔇 Additional comments (6)
src/partials/ArticleItemPartial.vue (6)
69-69: LGTM!The Vue composition API imports are appropriate for the reactive state management implemented in this component.
73-75: LGTM!Assigning
definePropsto a const is the correct approach for accessing props in the composition API, particularly needed for the watcher onprops.item.cover_image_url.
77-78: LGTM!The reactive refs are initialized correctly with
falsevalues, representing the initial loading state before the image starts loading.
80-87: LGTM!The event handlers correctly manage loading states. Setting
imageLoadedtotruein the error handler is appropriate as it stops the loading animation and switches to the error display.
89-89: LGTM!The computed property correctly evaluates to
trueduring loading (!imageLoaded) and error states (imageError), controlling skeleton and error icon visibility appropriately.
91-104: LGTM!The watcher correctly resets loading states when the image URL changes and handles missing URLs by treating them as error states. The
immediate: trueoption ensures proper initialization on mount, and optional chaining safely handles cases whereitemmight be undefined.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/partials/ArticleItemPartial.vue (1)
1-120: Fix formatting to satisfy CI checks.The CI failure indicates uncommitted formatting changes. Apply Prettier and commit the results:
npx prettier --write . git add . git commit -m "chore: format code to satisfy CI"Optionally, add a
"format": "prettier --write ."script topackage.jsonfor future consistency.
🧹 Nitpick comments (1)
src/partials/ArticleItemPartial.vue (1)
6-6: Simplify the ternary expression for better readability.The nested ternary can be simplified since both branches when
isImageErroris true orshowSkeletonis false result in'animate-none'.Apply this diff:
- :class="isImageError ? 'animate-none' : showSkeleton ? 'animate-pulse' : 'animate-none'" + :class="showSkeleton && !isImageError ? 'animate-pulse' : 'animate-none'"Based on past review comments.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/partials/ArticleItemPartial.vue(2 hunks)
🧰 Additional context used
🪛 GitHub Actions: Test Format Workflow
src/partials/ArticleItemPartial.vue
[error] 1-1: Command 'git diff --exit-code' failed with exit code 1. Uncommitted changes detected in src/partials/ArticleItemPartial.vue.
🔇 Additional comments (3)
src/partials/ArticleItemPartial.vue (3)
8-48: LGTM! Clean implementation of skeleton loading with error handling.The conditional rendering and state transitions work correctly:
- Image is hidden with
opacity-0while loading and fades in when loaded- On error, the image is removed and replaced with an appropriate broken-image icon
- The skeleton overlay serves both as a loading indicator and error state container
92-102: LGTM! Past review feedback has been successfully addressed.The
ImageStatustype and handlers implement exactly what was suggested in the previous review. This makes the state transitions much clearer and easier to reason about compared to the previous boolean approach.
108-119: LGTM! Watcher correctly handles URL changes and missing images.The watcher properly:
- Resets state to
'loading'when the image URL changes- Sets state to
'error'immediately if the URL is missing- Runs on mount with
immediate: trueto handle initial stateThe image element's
@loadand@errorhandlers will fire appropriately when the browser completes the request.
Summary
Testing
https://chatgpt.com/codex/tasks/task_e_68db8947b48483339f39cf89d8b1b735
Summary by CodeRabbit