Skip to content

Commit 66650cf

Browse files
PJCoopsclaude
PJCoops
and
claude
committed
feat(docs): Replace Loader2 spinners with branded PixelGrid animations
- Update Empty & Loading States pattern page to use PixelGrid - Update Button loading examples to show PixelGrid alongside buttons - Update Badge loading examples to show PixelGrid with badges - Update FeedbackDialog to use PixelGrid for session loading state - Update RoadmapContent voting button with PixelGrid animation Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 2bdfa7b commit 66650cf

6 files changed

Lines changed: 146 additions & 82 deletions

File tree

‎app/components/badge/page.tsx‎

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { ComponentNav } from "@/components/component-nav";
22
import { Badge } from "@/components/ui/badge";
33
import { ComponentPreview } from "@/components/component-preview";
44
import { PropsTable } from "@/components/props-table";
5-
import { Loader2, Check, X, Circle, Zap, AlertTriangle } from "lucide-react";
5+
import { Check, X, Circle, Zap, AlertTriangle } from "lucide-react";
6+
import { PixelGrid } from "@/components/ui/pixel-grid";
67

78
const badgeProps = [
89
{
@@ -172,29 +173,38 @@ export default function BadgePage() {
172173
</ComponentPreview>
173174

174175
<h3 className="text-lg font-medium">Loading State</h3>
176+
<p className="text-sm text-muted-foreground mb-2">
177+
Use PixelGrid alongside badges for branded loading indicators.
178+
</p>
175179
<ComponentPreview
176-
code={`<div className="flex flex-wrap gap-2">
177-
<Badge variant="secondary">
178-
<Loader2 className="animate-spin" /> Loading
179-
</Badge>
180-
<Badge variant="info-soft" rounded="full">
181-
<Loader2 className="animate-spin" /> Syncing
182-
</Badge>
183-
<Badge variant="warning-soft">
184-
<Loader2 className="animate-spin" /> Processing
185-
</Badge>
180+
code={`<div className="flex flex-col gap-3">
181+
<div className="flex items-center gap-2">
182+
<PixelGrid dimension="4x4" pattern="cross-spin" size="sm" />
183+
<Badge variant="secondary">Loading</Badge>
184+
</div>
185+
<div className="flex items-center gap-2">
186+
<PixelGrid dimension="4x4" pattern="ripple" size="sm" />
187+
<Badge variant="info-soft" rounded="full">Syncing</Badge>
188+
</div>
189+
<div className="flex items-center gap-2">
190+
<PixelGrid pattern="corners-sync" size="sm" />
191+
<Badge variant="warning-soft">Processing</Badge>
192+
</div>
186193
</div>`}
187194
>
188-
<div className="flex flex-wrap gap-2">
189-
<Badge variant="secondary">
190-
<Loader2 className="animate-spin" /> Loading
191-
</Badge>
192-
<Badge variant="info-soft" rounded="full">
193-
<Loader2 className="animate-spin" /> Syncing
194-
</Badge>
195-
<Badge variant="warning-soft">
196-
<Loader2 className="animate-spin" /> Processing
197-
</Badge>
195+
<div className="flex flex-col gap-3">
196+
<div className="flex items-center gap-2">
197+
<PixelGrid dimension="4x4" pattern="cross-spin" size="sm" />
198+
<Badge variant="secondary">Loading</Badge>
199+
</div>
200+
<div className="flex items-center gap-2">
201+
<PixelGrid dimension="4x4" pattern="ripple" size="sm" />
202+
<Badge variant="info-soft" rounded="full">Syncing</Badge>
203+
</div>
204+
<div className="flex items-center gap-2">
205+
<PixelGrid pattern="corners-sync" size="sm" />
206+
<Badge variant="warning-soft">Processing</Badge>
207+
</div>
198208
</div>
199209
</ComponentPreview>
200210

‎app/components/button/page.tsx‎

Lines changed: 38 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { ComponentNav } from "@/components/component-nav";
22
import { Button } from "@/components/ui/button";
33
import { ComponentPreview } from "@/components/component-preview";
44
import { PropsTable } from "@/components/props-table";
5-
import { Mail, Loader2, ChevronRight } from "lucide-react";
5+
import { Mail, ChevronRight } from "lucide-react";
6+
import { PixelGrid } from "@/components/ui/pixel-grid";
67

78
const buttonProps = [
89
{
@@ -149,16 +150,44 @@ export default function ButtonPage() {
149150
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
150151
Loading
151152
</h2>
153+
<p className="text-muted-foreground">
154+
Use the branded PixelGrid animation alongside loading buttons for a consistent experience.
155+
</p>
152156
<ComponentPreview
153-
code={`<Button disabled>
154-
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
155-
Please wait
156-
</Button>`}
157+
code={`<div className="flex items-center gap-3">
158+
<PixelGrid dimension="4x4" pattern="cross-spin" size="sm" />
159+
<Button disabled>Please wait</Button>
160+
</div>`}
157161
>
158-
<Button disabled>
159-
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
160-
Please wait
161-
</Button>
162+
<div className="flex items-center gap-3">
163+
<PixelGrid dimension="4x4" pattern="cross-spin" size="sm" />
164+
<Button disabled>Please wait</Button>
165+
</div>
166+
</ComponentPreview>
167+
168+
<h3 className="text-lg font-medium">Loading with Different Patterns</h3>
169+
<ComponentPreview
170+
code={`<div className="flex flex-col gap-4">
171+
<div className="flex items-center gap-3">
172+
<PixelGrid dimension="4x4" pattern="ripple" size="sm" />
173+
<Button disabled variant="outline">Saving...</Button>
174+
</div>
175+
<div className="flex items-center gap-3">
176+
<PixelGrid pattern="corners-sync" size="sm" />
177+
<Button disabled variant="secondary">Processing...</Button>
178+
</div>
179+
</div>`}
180+
>
181+
<div className="flex flex-col gap-4">
182+
<div className="flex items-center gap-3">
183+
<PixelGrid dimension="4x4" pattern="ripple" size="sm" />
184+
<Button disabled variant="outline">Saving...</Button>
185+
</div>
186+
<div className="flex items-center gap-3">
187+
<PixelGrid pattern="corners-sync" size="sm" />
188+
<Button disabled variant="secondary">Processing...</Button>
189+
</div>
190+
</div>
162191
</ComponentPreview>
163192
</div>
164193

‎app/docs/patterns/states/page.tsx‎

Lines changed: 40 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import {
1616
Zap,
1717
Sun,
1818
FileQuestion,
19-
Loader2,
2019
} from "lucide-react";
20+
import { PixelGrid } from "@/components/ui/pixel-grid";
2121

2222
export default function StatesPatternPage() {
2323
return (
@@ -182,46 +182,62 @@ export default function StatesPatternPage() {
182182
</ComponentPreview>
183183
</div>
184184

185-
{/* Loading Spinner */}
185+
{/* Loading Animation */}
186186
<div className="space-y-4">
187187
<h2 className="scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight">
188-
Loading Spinner
188+
Loading Animation
189189
</h2>
190190
<p className="text-muted-foreground">
191-
For quick operations or when skeleton doesn&apos;t fit, use a spinner.
191+
Use the branded PixelGrid animation for loading states. Available in multiple sizes and patterns.
192192
</p>
193193
<ComponentPreview
194-
code={`{/* Centered spinner */}
194+
code={`import { PixelGrid } from "@sourceful-energy/ui"
195+
196+
{/* Centered loading */}
195197
<div className="flex flex-col items-center justify-center py-12">
196-
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
197-
<p className="text-sm text-muted-foreground mt-2">Loading devices...</p>
198+
<PixelGrid pattern="frame" size="md" />
199+
<p className="text-sm text-muted-foreground mt-4">Loading devices...</p>
200+
</div>
201+
202+
{/* Compact loading */}
203+
<div className="flex items-center gap-3">
204+
<PixelGrid pattern="corners-sync" size="sm" />
205+
<span className="text-sm text-muted-foreground">Saving...</span>
198206
</div>
199207
200-
{/* Button with spinner */}
201-
<Button disabled>
202-
<Loader2 className="h-4 w-4 animate-spin mr-2" />
203-
Saving...
204-
</Button>`}
208+
{/* Minimal inline loading */}
209+
<div className="flex items-center gap-2">
210+
<PixelGrid dimension="4x4" pattern="cross-spin" size="sm" />
211+
<span className="text-sm">Processing</span>
212+
</div>`}
205213
>
206214
<div className="space-y-6 w-full max-w-md">
207215
<Card>
208216
<CardContent className="pt-6">
209217
<div className="flex flex-col items-center justify-center py-8">
210-
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
211-
<p className="text-sm text-muted-foreground mt-2">Loading devices...</p>
218+
<PixelGrid pattern="frame" size="md" />
219+
<p className="text-sm text-muted-foreground mt-4">Loading devices...</p>
220+
</div>
221+
</CardContent>
222+
</Card>
223+
<Card>
224+
<CardContent className="pt-6">
225+
<div className="flex flex-col gap-4">
226+
<div className="flex items-center gap-3">
227+
<PixelGrid pattern="corners-sync" size="sm" />
228+
<span className="text-sm text-muted-foreground">Saving changes...</span>
229+
</div>
230+
<div className="flex items-center gap-3">
231+
<PixelGrid dimension="4x4" pattern="cross-spin" size="sm" />
232+
<span className="text-sm text-muted-foreground">Processing data...</span>
233+
</div>
234+
<div className="flex items-center gap-3">
235+
<PixelGrid dimension="4x4" pattern="ripple" size="sm" />
236+
<span className="text-sm text-muted-foreground">Syncing...</span>
237+
</div>
212238
</div>
213239
</CardContent>
214240
</Card>
215-
<div className="flex gap-2">
216-
<Button disabled>
217-
<Loader2 className="h-4 w-4 animate-spin mr-2" />
218-
Saving...
219-
</Button>
220-
<Button variant="outline" disabled>
221-
<Loader2 className="h-4 w-4 animate-spin mr-2" />
222-
Loading...
223-
</Button>
224-
</div>
225241
</div>
226242
</ComponentPreview>
227243
</div>

‎app/roadmap/roadmap-content.tsx‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
import { useState } from "react";
44
import { useSession, signIn } from "next-auth/react";
5-
import { ThumbsUp, ExternalLink, Loader2 } from "lucide-react";
5+
import { ThumbsUp, ExternalLink } from "lucide-react";
6+
import { PixelGrid } from "@/components/ui/pixel-grid";
67
import { toast } from "sonner";
78
import { Button } from "@/components/ui/button";
89
import { Badge } from "@/components/ui/badge";
@@ -156,22 +157,20 @@ export function RoadmapContent({ initialItems }: RoadmapContentProps) {
156157
</div>
157158
<CardTitle className="text-lg">{item.title}</CardTitle>
158159
</div>
159-
<Button
160-
variant="outline"
161-
size="sm"
162-
className="shrink-0"
163-
onClick={() => handleVote(item.number)}
164-
disabled={votingItem === item.number}
165-
>
166-
{votingItem === item.number ? (
167-
<Loader2 className="h-4 w-4 animate-spin" />
168-
) : (
169-
<>
170-
<ThumbsUp className="h-4 w-4 mr-1" />
171-
{item.votes}
172-
</>
160+
<div className="flex items-center gap-2 shrink-0">
161+
{votingItem === item.number && (
162+
<PixelGrid dimension="4x4" pattern="cross-spin" size="sm" />
173163
)}
174-
</Button>
164+
<Button
165+
variant="outline"
166+
size="sm"
167+
onClick={() => handleVote(item.number)}
168+
disabled={votingItem === item.number}
169+
>
170+
<ThumbsUp className="h-4 w-4 mr-1" />
171+
{item.votes}
172+
</Button>
173+
</div>
175174
</div>
176175
</CardHeader>
177176
<CardContent>

‎components/feedback-dialog.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { useState } from "react";
44
import { useSession, signIn } from "next-auth/react";
55
import { usePathname } from "next/navigation";
66
import { toast } from "sonner";
7-
import { Loader2, Github } from "lucide-react";
7+
import { Github } from "lucide-react";
8+
import { PixelGrid } from "@/components/ui/pixel-grid";
89
import {
910
Dialog,
1011
DialogContent,
@@ -106,8 +107,9 @@ export function FeedbackDialog({ open, onOpenChange }: FeedbackDialogProps) {
106107
return (
107108
<Dialog open={open} onOpenChange={onOpenChange}>
108109
<DialogContent className="sm:max-w-md">
109-
<div className="flex items-center justify-center py-8">
110-
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
110+
<div className="flex flex-col items-center justify-center py-8">
111+
<PixelGrid pattern="frame" size="md" />
112+
<p className="text-sm text-muted-foreground mt-4">Loading...</p>
111113
</div>
112114
</DialogContent>
113115
</Dialog>
@@ -226,16 +228,14 @@ export function FeedbackDialog({ open, onOpenChange }: FeedbackDialogProps) {
226228
>
227229
Cancel
228230
</Button>
229-
<Button type="submit" disabled={isSubmitting}>
230-
{isSubmitting ? (
231-
<>
232-
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
233-
Submitting...
234-
</>
235-
) : (
236-
"Submit Feedback"
231+
<div className="flex items-center gap-2">
232+
{isSubmitting && (
233+
<PixelGrid dimension="4x4" pattern="cross-spin" size="sm" />
237234
)}
238-
</Button>
235+
<Button type="submit" disabled={isSubmitting}>
236+
{isSubmitting ? "Submitting..." : "Submit Feedback"}
237+
</Button>
238+
</div>
239239
</DialogFooter>
240240
</form>
241241
</DialogContent>

‎content/changelog/CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,16 @@ All notable changes to the Sourceful Design System (`@sourceful-energy/ui`) are
55
This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

77

8+
## [0.1.32] - 2026-01-12
9+
10+
### Changed
11+
- **docs**: Replace Loader2 spinners with branded PixelGrid animations in loading states
12+
- **docs**: Update Button loading examples to use PixelGrid component
13+
- **docs**: Update Badge loading examples to use PixelGrid alongside badges
14+
- **component**: Update FeedbackDialog to use PixelGrid for loading states
15+
- **component**: Update RoadmapContent voting button to use PixelGrid animation
16+
17+
818
## [0.1.31] - 2026-01-12
919

1020
### Added

0 commit comments

Comments
 (0)