[jules] enhance: Add complete skeleton loading for GroupDetails page #297
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,136 @@ | ||||||
| import React from 'react'; | ||||||
|
Contributor
There was a problem hiding this comment. 🧹 Nitpick | 🔵 Trivial Unused With React 19 and the new JSX transform, the ♻️ Suggested cleanup-import React from 'react';
import { useTheme } from '../../contexts/ThemeContext';📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||
| import { useTheme } from '../../contexts/ThemeContext'; | ||||||
| import { THEMES } from '../../constants'; | ||||||
| import { Skeleton } from '../ui/Skeleton'; | ||||||
| import { motion } from 'framer-motion'; | ||||||
|
|
||||||
| export const GroupDetailsSkeleton = () => { | ||||||
| const { style } = useTheme(); | ||||||
|
|
||||||
| return ( | ||||||
| <div className="p-4 md:p-6 max-w-7xl mx-auto space-y-8 min-h-screen"> | ||||||
| {/* Hero Section Skeleton */} | ||||||
| <motion.div | ||||||
| initial={{ y: -20, opacity: 0 }} | ||||||
| animate={{ y: 0, opacity: 1 }} | ||||||
| className={`relative overflow-hidden rounded-3xl h-48 md:h-64 ${ | ||||||
| style === THEMES.NEOBRUTALISM ? 'border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]' : 'border border-white/10 shadow-2xl' | ||||||
| }`} | ||||||
|
Comment on lines
+13
to
+18
Contributor
There was a problem hiding this comment. 🧩 Analysis chain🏁 Script executed: #!/bin/bash
# Verify the actual hero section's height constraints in GroupDetails.tsx
rg -n 'Immersive Header|motion\.div' web/pages/GroupDetails.tsx | head -20
# Check for h-48, h-64, or min-h classes in the hero section
sed -n '571,624p' web/pages/GroupDetails.tsx | rg 'h-\d+|min-h'Repository: Devasy/splitwiser Length of output: 1467 🏁 Script executed: # Read the full Immersive Header section
sed -n '570,625p' web/pages/GroupDetails.tsxRepository: Devasy/splitwiser Length of output: 4108 🏁 Script executed: # Also read the GroupDetailsSkeleton file to see the skeleton structure
cat -n web/components/skeletons/GroupDetailsSkeleton.tsxRepository: Devasy/splitwiser Length of output: 8068 Hero skeleton height (h-48/h-64) does not match actual component height, causing potential layout shift. The skeleton constrains the hero to fixed heights with Consider either:
🤖 Prompt for AI Agents |
||||||
| > | ||||||
| <div className={`absolute inset-0 ${style === THEMES.NEOBRUTALISM ? 'bg-pink-100' : 'bg-gradient-to-r from-purple-600/20 to-pink-600/20 backdrop-blur-3xl'}`} /> | ||||||
| <div className="relative z-10 p-8 md:p-12 h-full flex flex-col md:flex-row justify-between items-start md:items-end gap-6"> | ||||||
| <div className="space-y-4 w-full max-w-sm"> | ||||||
| <div className="flex items-center gap-3"> | ||||||
| <Skeleton className="h-6 w-16" /> | ||||||
| <Skeleton className="h-4 w-24" /> | ||||||
| </div> | ||||||
| <Skeleton className="h-12 md:h-16 w-3/4" /> | ||||||
| </div> | ||||||
| <div className="flex flex-col items-end gap-4"> | ||||||
| <div className="flex -space-x-4"> | ||||||
| {[1, 2, 3, 4, 5].map((i) => ( | ||||||
| <Skeleton | ||||||
| key={i} | ||||||
| className={`w-12 h-12 rounded-full border-4 ${style === THEMES.NEOBRUTALISM ? 'border-black' : 'border-indigo-600'}`} | ||||||
| /> | ||||||
| ))} | ||||||
| <Skeleton className={`w-12 h-12 rounded-full border-4 ${style === THEMES.NEOBRUTALISM ? 'border-black' : 'border-indigo-600'}`} /> | ||||||
| </div> | ||||||
|
Comment on lines
+31
to
+38
Contributor
There was a problem hiding this comment. 🧹 Nitpick | 🔵 Trivial Minor: Avatar count mismatch with actual UI. The skeleton renders 6 avatar placeholders (5 in loop + 1 outside), but the actual GroupDetails hero renders up to 5 member avatars + an overflow indicator + a Settings button (potentially 7 elements). This is a minor visual discrepancy during the skeleton-to-content transition. 🤖 Prompt for AI Agents |
||||||
| <div className="flex gap-3"> | ||||||
| <Skeleton className={`h-10 w-28 ${style === THEMES.NEOBRUTALISM ? 'rounded-none border-2 border-black' : 'rounded-xl'}`} /> | ||||||
| <Skeleton className={`h-10 w-32 ${style === THEMES.NEOBRUTALISM ? 'rounded-none border-2 border-black' : 'rounded-xl'}`} /> | ||||||
| </div> | ||||||
| </div> | ||||||
| </div> | ||||||
| </motion.div> | ||||||
|
|
||||||
| {/* Group Totals Summary Cards Skeleton */} | ||||||
| <motion.div | ||||||
| initial={{ opacity: 0, y: 10 }} | ||||||
| animate={{ opacity: 1, y: 0 }} | ||||||
| transition={{ delay: 0.1 }} | ||||||
| className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto" | ||||||
| > | ||||||
| {[1, 2, 3, 4].map((i) => ( | ||||||
| <div | ||||||
| key={i} | ||||||
| className={`p-4 flex flex-col items-center justify-center h-28 ${ | ||||||
| style === THEMES.NEOBRUTALISM | ||||||
| ? 'bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]' | ||||||
| : 'bg-white/5 backdrop-blur-sm rounded-2xl border border-white/10' | ||||||
| }`} | ||||||
| > | ||||||
| <Skeleton className="h-3 w-20 mb-3" /> | ||||||
| <Skeleton className="h-8 w-24 mb-2" /> | ||||||
| <Skeleton className="h-3 w-16" /> | ||||||
| </div> | ||||||
| ))} | ||||||
| </motion.div> | ||||||
|
|
||||||
| {/* Navigation Pills Skeleton */} | ||||||
| <motion.div | ||||||
| initial={{ opacity: 0, scale: 0.95 }} | ||||||
| animate={{ opacity: 1, scale: 1 }} | ||||||
| transition={{ delay: 0.2 }} | ||||||
| className="flex justify-center" | ||||||
| > | ||||||
| <div className={`p-1.5 flex gap-2 ${ | ||||||
| style === THEMES.NEOBRUTALISM | ||||||
| ? 'bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none' | ||||||
| : 'bg-white/5 border border-white/10 backdrop-blur-xl rounded-2xl' | ||||||
| }`}> | ||||||
| <Skeleton className={`h-10 w-32 ${style === THEMES.NEOBRUTALISM ? 'rounded-none' : 'rounded-xl'}`} /> | ||||||
| <Skeleton className={`h-10 w-32 ${style === THEMES.NEOBRUTALISM ? 'rounded-none' : 'rounded-xl'}`} /> | ||||||
| <Skeleton className={`h-10 w-32 ${style === THEMES.NEOBRUTALISM ? 'rounded-none' : 'rounded-xl'}`} /> | ||||||
| </div> | ||||||
| </motion.div> | ||||||
|
|
||||||
| {/* Content Area Skeleton (Expenses List) */} | ||||||
| <motion.div | ||||||
| initial={{ opacity: 0, y: 20 }} | ||||||
| animate={{ opacity: 1, y: 0 }} | ||||||
| transition={{ delay: 0.3 }} | ||||||
| className="space-y-4 max-w-3xl mx-auto" | ||||||
| > | ||||||
| {/* Search Bar Skeleton */} | ||||||
| <div className="relative mb-6"> | ||||||
| <Skeleton className={`w-full h-12 ${ | ||||||
| style === THEMES.NEOBRUTALISM ? 'rounded-none border-2 border-black' : 'rounded-2xl' | ||||||
| }`} /> | ||||||
| </div> | ||||||
|
|
||||||
| {/* List Items Skeletons */} | ||||||
| {[1, 2, 3, 4, 5].map((i) => ( | ||||||
| <div | ||||||
| key={i} | ||||||
| className={`p-5 flex items-center gap-5 ${ | ||||||
| style === THEMES.NEOBRUTALISM | ||||||
| ? 'bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] rounded-none' | ||||||
| : 'bg-white/5 border border-white/10 rounded-2xl backdrop-blur-sm' | ||||||
| }`} | ||||||
| > | ||||||
| {/* Date Box */} | ||||||
| <Skeleton className={`w-16 h-16 flex-shrink-0 ${ | ||||||
| style === THEMES.NEOBRUTALISM ? 'rounded-none border-2 border-black' : 'rounded-xl' | ||||||
| }`} /> | ||||||
|
|
||||||
| {/* Description & Payer */} | ||||||
| <div className="flex-1 space-y-3"> | ||||||
| <Skeleton className="h-6 w-3/4 max-w-[200px]" /> | ||||||
| <div className="flex items-center gap-2"> | ||||||
| <Skeleton className={`w-5 h-5 ${style === THEMES.NEOBRUTALISM ? 'rounded-none' : 'rounded-full'}`} /> | ||||||
| <Skeleton className="h-4 w-32" /> | ||||||
| </div> | ||||||
| </div> | ||||||
|
|
||||||
| {/* Amount & Share */} | ||||||
| <div className="text-right space-y-2"> | ||||||
| <Skeleton className="h-7 w-20 ml-auto" /> | ||||||
| <Skeleton className="h-4 w-16 ml-auto" /> | ||||||
| </div> | ||||||
| </div> | ||||||
| ))} | ||||||
| </motion.div> | ||||||
| </div> | ||||||
| ); | ||||||
| }; | ||||||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Task entry placed under wrong section.
This Web skeleton loading task is placed under the "### Mobile" section (which starts at line 51), but the affected files are in
web/. It should be placed under the "### Web" section (starting at line 11) with the other completed web tasks.📝 Suggested fix: Move entry under Web section
Move lines 60-66 to after line 49 (after the last completed Web task) and before the "### Mobile" section.
🤖 Prompt for AI Agents