Uh oh!
There was an error while loading. Please reload this page.
Feat/pictique loading spinner - #652
Conversation
📝 WalkthroughWalkthroughThis PR implements infinite scrolling pagination for the feed using IntersectionObserver-based lazy loading. It introduces new pagination stores (currentPage, hasMore, isLoadingMore), refactors fetchFeed to support append mode for incremental loading, adds loadMoreFeed to fetch subsequent pages, and implements optimistic UI updates for post likes with rollback on error. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Component as home/+page.svelte
participant Observer as IntersectionObserver
participant Store as posts.ts
participant API as /posts API
Note over User,API: Initial Load
User->>Component: Visit home
Component->>Store: resetFeed()
Component->>Store: fetchFeed(1, 10, false)
Store->>API: GET /posts?page=1&limit=10
API-->>Store: posts[], totalPages
Store->>Component: Update posts, currentPage, hasMore
Note over User,API: Infinite Scroll
User->>Observer: Scroll near sentinel
Observer->>Component: Intersection observed
alt hasMore && !isLoadingMore
Component->>Store: loadMoreFeed()
Store->>API: GET /posts?page=2&limit=10
API-->>Store: posts[]
Store->>Component: Append posts, increment page
Component->>User: Render new posts
else No more data
Component->>User: Show "No more posts"
end
Note over User,API: Optimistic Like
User->>Component: Click like
Component->>Component: Toggle likedBy (optimistic)
Component->>Store: toggleLike(postId)
alt Success
Store->>API: PATCH /posts/:id/like
API-->>Store: Updated post
else Error
Component->>Component: Rollback likedBy
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
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 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
platforms/pictique/src/lib/stores/posts.ts (2)
35-48: Consider edge case inhasMorecalculation.The flexible response parsing on line 36 handles multiple API shapes, which is pragmatic. However, the
hasMorecondition on line 48 may have an edge case:hasMore.set(newPosts.length===limit&&responsePage<totalPages);If
totalPagesdefaults to0(whentotalis0or undefined),responsePage < totalPageswill befalse, which is correct. But if the API returnstotal: 0with actual posts (inconsistent response),hasMorewill incorrectly befalse.🔎 Consider a more defensive approach
- hasMore.set(newPosts.length === limit && responsePage < totalPages);+ // Only set hasMore to false when we definitively know there's no more data+ const moreAvailable = newPosts.length === limit && (totalPages === 0 || responsePage < totalPages);+ hasMore.set(moreAvailable);
73-90: Redundant mapping on line 79.The
.map((img) => img)creates a shallow copy of the array but doesn't transform elements. If the intent is to create a copy, use spread syntax for clarity.🔎 Simplify the images array
const response = await apiClient.post("/api/posts", { text, - images: images.map((img) => img),+ images: [...images], });Or if a copy isn't needed:
const response = await apiClient.post("/api/posts", { text, - images: images.map((img) => img),+ images, });
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
platforms/pictique/src/lib/stores/posts.tsplatforms/pictique/src/routes/(protected)/home/+page.svelte
🧰 Additional context used
🧬 Code graph analysis (1)
platforms/pictique/src/lib/stores/posts.ts (1)
platforms/pictique/src/lib/types.ts (1)
Post(35-58)
🔇 Additional comments (9)
platforms/pictique/src/routes/(protected)/home/+page.svelte (5)
7-23: LGTM! Clean import organization.The new imports for pagination stores (
hasMore,isLoadingMore,loadMoreFeed,resetFeed) andgetfromsvelte/storeare correctly added to support the infinite scroll functionality.
31-56: Well-implemented IntersectionObserver with proper cleanup.The sentinel action correctly implements infinite scroll detection. Good use of
rootMargin: '200px'for pre-fetching before the user reaches the bottom, and proper cleanup indestroy().Minor consideration: Using
get()inside the callback reads the store value synchronously at callback time, which is correct here since the observer callback runs outside the Svelte reactive context.
111-115: LGTM! Clean initialization.Calling
resetFeed()beforefetchFeed()ensures a clean state on component mount, which is important when navigating back to this page.
137-207: Solid optimistic update pattern with proper rollback.The implementation correctly:
- Captures state before modification for reliable rollback
- Performs optimistic UI update immediately
- Calls the API in background
- Reverts on error with the saved original state
One minor edge case: if
profilebecomes null between the guard check (line 138) and the API response, the rollback would still work correctly sinceoriginalLikedByis captured early.
223-236: Nice loading spinner implementation.The conditional rendering properly handles all states:
- Loading more indicator with spinner
- End-of-feed message
- Sentinel for triggering more loads
The Tailwind classes are valid for v4.
platforms/pictique/src/lib/stores/posts.ts (4)
1-11: LGTM! Clean store declarations.The new pagination stores (
isLoadingMore,currentPage,hasMore) are properly typed with appropriate initial values.
16-20: LGTM! Simple and correct reset function.Properly resets all pagination state to initial values.
61-71: LGTM! Proper guard against concurrent fetches.The
loadMoreFeedfunction correctly checks bothisLoadingandisLoadingMoreto prevent duplicate requests, and respects thehasMoreflag.
92-101: LGTM! Simple and focused.The
toggleLikefunction correctly delegates optimistic updates to the caller (the component), keeping this function as a simple API wrapper that throws on failure for the caller to handle rollback.
Uh oh!
There was an error while loading. Please reload this page.
Description of change
Adds a loading spinner at the bottom of loading text
Issue Number
n/a
Type of change
How the change has been tested
Manual
Change checklist
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.