diff --git a/app/client.tsx b/app/client.tsx index 0d9b643..9fa6131 100644 --- a/app/client.tsx +++ b/app/client.tsx @@ -3,6 +3,7 @@ import { useQuery, gql } from '@/lib/graphql/hooks' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' import { LiveBadge } from '@/components/live-badge' +import { PageSpinner } from '@/components/page-spinner' import { MatchCard } from '@/components/match-card' const HOME_QUERY = gql` @@ -231,9 +232,7 @@ export function HomeClient() { )} - {loading && !data && ( -
Loading live World Cup data…
- )} + {loading && !data && } ) diff --git a/app/players/[name]/client.tsx b/app/players/[name]/client.tsx index ce782da..64a6aba 100644 --- a/app/players/[name]/client.tsx +++ b/app/players/[name]/client.tsx @@ -4,6 +4,7 @@ import { use, useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' import { MatchCard } from '@/components/match-card' +import { PageSpinner } from '@/components/page-spinner' const PLAYER_QUERY = gql` query Player($name: String!) { @@ -46,7 +47,7 @@ export function PlayerClient({ params }: { params: Promise<{ name: string }> }) `) if (loading && !data) { - return
Loading player…
+ return } if (!player) { diff --git a/app/stats/client.tsx b/app/stats/client.tsx index 16ac42e..f33e56b 100644 --- a/app/stats/client.tsx +++ b/app/stats/client.tsx @@ -2,6 +2,7 @@ import { useQuery, gql } from '@/lib/graphql/hooks' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' +import { PageSpinner } from '@/components/page-spinner' import { ChartBarIcon, StarIcon, TrophyIcon, ClockIcon, BoltIcon, FireIcon, SparklesIcon, ArrowPathIcon, GlobeEuropeAfricaIcon, TableCellsIcon, @@ -92,9 +93,7 @@ export function StatsClient() {

Historical Statistics

- {loading && !data && ( -
Loading statistics…
- )} + {loading && !data && } {/* ── Goals per tournament bar chart ── */} {tournaments.length > 0 && ( diff --git a/app/teams/[slug]/client.tsx b/app/teams/[slug]/client.tsx index 8e00a70..4ccba4d 100644 --- a/app/teams/[slug]/client.tsx +++ b/app/teams/[slug]/client.tsx @@ -4,6 +4,7 @@ import { use, useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' import { TrophyIcon } from '@heroicons/react/24/outline' +import { PageSpinner } from '@/components/page-spinner' const TEAM_QUERY = gql` query Team($slug: String!) { @@ -76,7 +77,7 @@ export function TeamClient({ params }: { params: Promise<{ slug: string }> }) { const years = Object.keys(matchesByYear).map(Number).sort((a, b) => b - a) if (loading && !teamData) { - return
Loading team…
+ return } if (!team) { diff --git a/app/tournaments/[year]/client.tsx b/app/tournaments/[year]/client.tsx index 2d45376..3d46273 100644 --- a/app/tournaments/[year]/client.tsx +++ b/app/tournaments/[year]/client.tsx @@ -3,6 +3,7 @@ import { useQuery, gql } from '@/lib/graphql/hooks' import { use, useEffect } from 'react' import Link from 'next/link' import { TeamFlag } from '@/components/team-flag' +import { PageSpinner } from '@/components/page-spinner' import { MatchCard } from '@/components/match-card' import { LiveBadge } from '@/components/live-badge' @@ -114,12 +115,7 @@ export function TournamentClient({ params }: { params: Promise<{ year: string }> const maxScorer = Math.max(...(t?.topScorers?.map((s: { goals: number }) => s.goals) ?? [1]), 1) if (loading && !data) { - return ( -
-
-
Loading {year} World Cup…
-
- ) + return } if (!t) return
Tournament {year} not found.
diff --git a/components/page-spinner.tsx b/components/page-spinner.tsx new file mode 100644 index 0000000..1e2cbbe --- /dev/null +++ b/components/page-spinner.tsx @@ -0,0 +1,8 @@ +export function PageSpinner({ label }: { label?: string }) { + return ( +
+
+ {label && {label}} +
+ ) +}