popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace {__} workaround with clean range() helper in Svelte templates

Browse Source
This commit is contained in:
popertots
2026-07-11 12:50:13 +01:00
parent d172adf392
commit 294d844493
21 changed files with 71 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/admin/BookingCreateModal.svelte
+4 -9
View File
@@ -5,6 +5,7 @@
import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
import { isValidUKPhone, toE164UK } from '$lib/utils/phone';
import { formatUserName } from '$lib/utils/nameDisplay';
import { range } from '$lib/utils/format';
// UI Components
import * as Modal from '$lib/components/ui/dialog';
@@ -1145,10 +1146,8 @@
<div class="max-h-[300px] overflow-y-auto rounded-md border border-gray-200">
{#if loadingUsers}
<div class="space-y-2 p-2">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<Skeleton class="h-10 w-full" />
{__}
{/each}
</div>
{:else if users.length === 0}
@@ -1259,10 +1258,8 @@
<Card.Content class="space-y-4">
{#if loadingServices}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
{#each Array(4) as __, i (i)}
{__}
{#each range(4) as i (i)}
<Skeleton class="h-28 w-full" />
{__}
{/each}
</div>
{:else if services.length === 0}
@@ -1294,10 +1291,8 @@
</div>
{#if loadingCustomServices}
<div class="space-y-2">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<Skeleton class="h-10 w-full" />
{__}
{/each}
</div>
{:else if customServices.length > 0}
frontend/src/lib/components/admin/BusinessSettings.svelte
+2 -2
View File
@@ -14,6 +14,7 @@
import type { BusinessSettings } from '$lib/types/settings';
import { isValidUKPhone, toE164UK, normalisePhoneInput } from '$lib/utils/phone';
import { isValidEmail, normalizeEmail } from '$lib/utils/email';
import { range } from '$lib/utils/format';
let settings = $state<BusinessSettings | null>(null);
let loading = $state(true);
@@ -286,8 +287,7 @@
<Card.Content>
{#if loading}
<div class="space-y-4">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<div class="space-y-2">
<Skeleton class="h-4 w-32" />
<Skeleton class="h-5 w-full" />
frontend/src/lib/components/admin/CustomServicesManagement.svelte
+2 -2
View File
@@ -2,6 +2,7 @@
import { apiFetch } from '$lib/utils/api';
import { toast } from 'svelte-sonner';
import { sanitizeText } from '$lib/utils/toast-safe';
import { range } from '$lib/utils/format';
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
import { Input } from '$lib/components/ui/input';
@@ -283,8 +284,7 @@
{#if loading}
<div class="space-y-3">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<Skeleton class="h-12 w-full" />
{/each}
</div>
frontend/src/lib/components/admin/DiscountsManagement.svelte
+2 -2
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { SvelteDate } from 'svelte/reactivity';
import { apiFetch } from '$lib/utils/api';
import { range } from '$lib/utils/format';
import { toast } from 'svelte-sonner';
import { Button } from '$lib/components/ui/button';
import * as Card from '$lib/components/ui/card';
@@ -275,8 +276,7 @@
<Card.Content>
{#if loading}
<div class="space-y-3">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<Skeleton class="h-16 w-full" />
{/each}
</div>
frontend/src/lib/components/admin/GiftCardsManagement.svelte
+3 -4
View File
@@ -8,6 +8,7 @@
import { EmailInput } from '$lib/components/ui/email-input';
import * as Modal from '$lib/components/ui/dialog';
import { Skeleton } from '$lib/components/ui/skeleton';
import { range } from '$lib/utils/format';
import { formatUserName } from '$lib/utils/nameDisplay';
import { SvelteDate, SvelteURLSearchParams } from 'svelte/reactivity';
@@ -1284,8 +1285,7 @@
<!-- Mobile view - Balances -->
<div class="grid gap-4 md:hidden">
{#if loading}
{#each Array(2) as __, i (i)}
{__}
{#each range(2) as i (i)}
<div class="space-y-3 rounded-lg border p-4">
<Skeleton class="h-4 w-36" />
<Skeleton class="h-4 w-full" />
@@ -1412,8 +1412,7 @@
<!-- Mobile view - Expired Balances -->
<div class="grid gap-4 md:hidden">
{#if loadingExpired}
{#each Array(2) as __, i (i)}
{__}
{#each range(2) as i (i)}
<div class="space-y-3 rounded-lg border p-4">
<Skeleton class="h-4 w-36" />
<Skeleton class="h-4 w-full" />
frontend/src/lib/components/admin/HolidayHours.svelte
+2 -2
View File
@@ -3,6 +3,7 @@
import { toast } from 'svelte-sonner';
import { sanitizeText } from '$lib/utils/toast-safe';
import { apiFetch } from '$lib/utils/api';
import { range } from '$lib/utils/format';
// shadcn-svelte components
import { Button } from '$lib/components/ui/button';
@@ -342,8 +343,7 @@
<Card.Content class="space-y-4">
{#if exceptionGroupsLoading}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
{#each Array(2) as __, i (i)}
{__}
{#each range(2) as i (i)}
<Skeleton class="h-32 w-full" />
{/each}
</div>
frontend/src/lib/components/admin/PatchTestsManagement.svelte
+2 -2
View File
@@ -6,6 +6,7 @@
import { Input } from '$lib/components/ui/input';
import { Checkbox } from '$lib/components/ui/checkbox';
import { Skeleton } from '$lib/components/ui/skeleton';
import { range } from '$lib/utils/format';
import * as Modal from '$lib/components/ui/dialog';
import { SvelteMap } from 'svelte/reactivity';
@@ -356,8 +357,7 @@
<div class="space-y-4 md:hidden">
{#if loading}
{#each Array(2) as __, i (i)}
{__}
{#each range(2) as i (i)}
<div class="space-y-3 rounded-lg border p-4">
<Skeleton class="h-5 w-32" />
<Skeleton class="h-4 w-48" />
frontend/src/lib/components/admin/ServicesManagement.svelte
+2 -2
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { apiFetch } from '$lib/utils/api';
import { range } from '$lib/utils/format';
// shadcn-svelte components
import { Button } from '$lib/components/ui/button';
@@ -462,8 +463,7 @@
<div class="space-y-4 md:hidden">
{#if servicesLoading}
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<div class="rounded-lg border p-4">
<div class="space-y-3">
<Skeleton class="h-5 w-32" />
frontend/src/lib/components/admin/TimeBlockers.svelte
+3 -5
View File
@@ -4,7 +4,7 @@
import { CalendarDate } from '@internationalized/date';
import { toast } from 'svelte-sonner';
import { sanitizeText } from '$lib/utils/toast-safe';
import { formatDuration } from '$lib/utils/format';
import { formatDuration, range } from '$lib/utils/format';
import { formatUserName } from '$lib/utils/nameDisplay';
import { formatLocalDateTime, parseWallClockDate } from '$lib/utils/timeSlots';
@@ -552,8 +552,7 @@
<Card.Content class="space-y-4">
{#if loading}
<div class="space-y-3">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<Skeleton class="h-16 w-full" />
{/each}
</div>
@@ -666,8 +665,7 @@
>
Prev
</Button>
{#each Array(totalPages) as __, i (i)}
{__}
{#each range(totalPages) as i (i)}
<Button
variant={currentPage === i + 1 ? 'default' : 'outline'}
size="sm"
frontend/src/lib/components/admin/UserModal.svelte
+2 -2
View File
@@ -7,6 +7,7 @@
import PatchTestModal from './PatchTestModal.svelte';
import { formatUserName } from '$lib/utils/nameDisplay';
import { parseWallClockDate } from '$lib/utils/timeSlots';
import { range } from '$lib/utils/format';
interface Props {
open: boolean;
@@ -507,8 +508,7 @@
Customer Relationship
</h3>
<div class="space-y-2">
{#each Array(5) as __, i (i)}
{__}
{#each range(5) as i (i)}
<div class="h-10 animate-pulse rounded-md bg-gray-200"></div>
{/each}
</div>
frontend/src/lib/components/admin/UsersCard.svelte
+2 -2
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { apiFetch } from '$lib/utils/api';
import { range } from '$lib/utils/format';
import * as Card from '$lib/components/ui/card';
import { Input } from '$lib/components/ui/input';
import { Button } from '$lib/components/ui/button';
@@ -176,8 +177,7 @@
<div class="mt-3 max-h-60 space-y-2 overflow-y-auto">
{#if initialLoad}
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<div class="rounded bg-gray-50 p-2">
<Skeleton class="mb-1 h-4 w-32" />
<Skeleton class="h-3 w-48" />
frontend/src/lib/components/admin/WalkInCreateModal.svelte
+4 -6
View File
@@ -6,6 +6,7 @@
import { isValidUKPhone, toE164UK } from '$lib/utils/phone';
import { formatUserName } from '$lib/utils/nameDisplay';
import { formatLocalDateTime } from '$lib/utils/timeSlots';
import { range } from '$lib/utils/format';
// UI Components
import * as Modal from '$lib/components/ui/dialog';
@@ -723,8 +724,7 @@
<div class="max-h-[300px] overflow-y-auto rounded-md border border-gray-200">
{#if loadingUsers}
<div class="space-y-2 p-2">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<Skeleton class="h-10 w-full" />
{/each}
</div>
@@ -836,8 +836,7 @@
<Card.Content class="space-y-4">
{#if loadingServices}
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
{#each Array(4) as __, i (i)}
{__}
{#each range(4) as i (i)}
<Skeleton class="h-28 w-full" />
{/each}
</div>
@@ -870,8 +869,7 @@
</div>
{#if loadingCustomServices}
<div class="space-y-2">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<Skeleton class="h-10 w-full" />
{/each}
</div>
frontend/src/lib/components/admin/WeeklySchedule.svelte
+2 -2
View File
@@ -2,6 +2,7 @@
import { toast } from 'svelte-sonner';
import { browser } from '$app/environment';
import { apiFetch } from '$lib/utils/api';
import { range } from '$lib/utils/format';
// shadcn-svelte components
import { Button } from '$lib/components/ui/button';
@@ -569,8 +570,7 @@
<!-- Mobile Skeleton -->
<div class="space-y-3 md:hidden">
{#each Array(7) as __, i (i)}
{__}
{#each range(7) as i (i)}
<div class="rounded-lg border p-4">
<div class="mb-3 flex items-center justify-between">
<div class="flex items-center gap-2">
frontend/src/lib/components/today/PendingApprovals.svelte
+2 -2
View File
@@ -8,6 +8,7 @@
import { Skeleton } from '$lib/components/ui/skeleton';
import ApprovalModal from '$lib/components/admin/ApprovalModal.svelte';
import EditRequestModal from '$lib/components/admin/EditRequestModal.svelte';
import { range } from '$lib/utils/format';
import { formatUserName } from '$lib/utils/nameDisplay';
interface Props {
@@ -312,8 +313,7 @@
<Card.Content>
{#if loading}
<div class="space-y-3">
{#each Array(3) as __, i (i)}
{__}
{#each range(3) as i (i)}
<div class="rounded-lg border p-3">
<div class="flex items-start justify-between">
<div class="flex-1 space-y-2">
frontend/src/lib/components/today/TodayCalendar.svelte
+2 -2
View File
@@ -5,6 +5,7 @@
import { toast } from 'svelte-sonner';
import { sanitizeText } from '$lib/utils/toast-safe';
import { formatUserName } from '$lib/utils/nameDisplay';
import { range } from '$lib/utils/format';
import * as Card from '$lib/components/ui/card';
import { Button } from '$lib/components/ui/button';
import { Badge } from '$lib/components/ui/badge';
@@ -687,8 +688,7 @@
<Card.Content>
{#if loading}
<div class="space-y-3">
{#each Array(5) as __, i (i)}
{__}
{#each range(5) as i (i)}
<div class="flex items-center gap-3 rounded-lg border p-3 sm:gap-4">
<Skeleton class="h-4 w-[45px] sm:w-[60px] lg:w-[80px]" />
<Skeleton class="h-10 w-1 shrink-0" />
frontend/src/lib/components/today/TodayStats.svelte
+2 -2
View File
@@ -4,6 +4,7 @@
import { Skeleton } from '$lib/components/ui/skeleton';
import * as Card from '$lib/components/ui/card';
import { formatLocalDateTime } from '$lib/utils/timeSlots';
import { range } from '$lib/utils/format';
type TodayAppointment = {
id: string;
@@ -210,8 +211,7 @@
<Card.Content>
{#if loading && !stats}
<div class="space-y-3">
{#each Array(6) as __, i (i)}
{__}
{#each range(6) as i (i)}
<Skeleton class="h-5 w-full" />
{/each}
</div>