csr tangled client in solid-js
skeleton loading anim for strings
+71
-6
+65
src/components/repo.tsx
+65
src/components/repo.tsx
···
1304
1304
);
1305
1305
};
1306
1306
1307
+
export const StringCardSkeleton: Component = () => (
1308
+
<div class="border border-gray-200 dark:border-gray-700 rounded-sm">
1309
+
<div class="py-4 px-6 rounded bg-white dark:bg-gray-800 flex flex-col gap-2">
1310
+
<div class="flex items-center gap-2">
1311
+
<SkeletonBlock class="h-5 w-1/3" />
1312
+
</div>
1313
+
<div class="space-y-2 mt-1">
1314
+
<SkeletonBlock class="h-4 w-5/6" />
1315
+
<SkeletonBlock class="h-4 w-2/3" />
1316
+
</div>
1317
+
<div class="mt-2 flex gap-4">
1318
+
<SkeletonBlock class="h-3 w-16" />
1319
+
<SkeletonBlock class="h-3 w-16" />
1320
+
</div>
1321
+
</div>
1322
+
</div>
1323
+
);
1324
+
1325
+
export const StringPageSkeleton: Component = () => (
1326
+
<div class="flex flex-col gap-4">
1327
+
<section class="mb-2 py-2 px-4">
1328
+
<div class="flex flex-col sm:flex-row items-start gap-4 justify-between">
1329
+
<div class="flex flex-col gap-2 w-full sm:w-1/2">
1330
+
<div class="flex items-center gap-2">
1331
+
<SkeletonBlock class="size-6 rounded-full shrink-0" />
1332
+
<SkeletonBlock class="h-5 w-1/4" />
1333
+
<span class="text-gray-400">/</span>
1334
+
<SkeletonBlock class="h-5 w-1/3" />
1335
+
</div>
1336
+
<div class="flex flex-col gap-1 mt-1">
1337
+
<SkeletonBlock class="h-4 w-1/3" />
1338
+
</div>
1339
+
</div>
1340
+
<div class="w-full sm:w-fit flex items-center gap-2">
1341
+
<SkeletonBlock class="h-8 w-24" />
1342
+
<SkeletonBlock class="h-8 w-16" />
1343
+
</div>
1344
+
</div>
1345
+
</section>
1346
+
1347
+
<section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full shadow-sm">
1348
+
<div class="flex flex-col md:flex-row md:justify-between md:items-center pb-2 mb-3 border-b border-gray-200 dark:border-gray-700">
1349
+
<SkeletonBlock class="h-5 w-1/3 mb-2 md:mb-0" />
1350
+
<SkeletonBlock class="h-5 w-1/4" />
1351
+
</div>
1352
+
<div class="space-y-2 py-2 overflow-hidden">
1353
+
<For each={Array.from({ length: 36 })}>
1354
+
{(_, index) => (
1355
+
<div class="untangled-skeleton-code-line">
1356
+
<SkeletonBlock class="h-4 w-8" />
1357
+
<SkeletonBlock class={
1358
+
index() % 7 === 0 ? 'h-4 w-1/3' :
1359
+
index() % 5 === 0 ? 'h-4 w-1/2' :
1360
+
index() % 4 === 0 ? 'h-4 w-3/4' :
1361
+
index() % 3 === 0 ? 'h-4 w-5/6' :
1362
+
'h-4 w-11/12'
1363
+
} />
1364
+
</div>
1365
+
)}
1366
+
</For>
1367
+
</div>
1368
+
</section>
1369
+
</div>
1370
+
);
1371
+
1307
1372
export const IssueOrPullRow: Component<{
1308
1373
title: string;
1309
1374
number: number | string;
+2
-2
src/pages/profile.tsx
+2
-2
src/pages/profile.tsx
···
24
24
import { For, Show, Switch, Match, createMemo, createSignal, createEffect, type Component } from 'solid-js';
25
25
import type { Did } from '@atcute/lexicons/syntax';
26
26
import { ErrorState, LoadingState, PlaceholderAvatar, SkeletonBlock, textareaStyles, inputStyles } from '../components/common';
27
-
import { RepoCard, RepoCardSkeleton } from '../components/repo';
27
+
import { RepoCard, RepoCardSkeleton, StringCardSkeleton } from '../components/repo';
28
28
import {
29
29
listFollowRecords,
30
30
createFollow,
···
1529
1529
fallback={
1530
1530
<div id="strings" class="grid grid-cols-1 gap-4 mb-6">
1531
1531
<For each={Array.from({ length: 3 })}>
1532
-
{() => <RepoCardSkeleton />}
1532
+
{() => <StringCardSkeleton />}
1533
1533
</For>
1534
1534
</div>
1535
1535
}
+4
-4
src/pages/string.tsx
+4
-4
src/pages/string.tsx
···
2
2
import { createQuery, useQueryClient } from '@tanstack/solid-query';
3
3
import { Show, Switch, Match, type Component, createSignal, createMemo, createEffect, onCleanup } from 'solid-js';
4
4
import type { ResourceUri } from '@atcute/lexicons/syntax';
5
-
import { Avatar, ErrorState, LoadingState, inputStyles, textareaStyles } from '../components/common';
6
-
import { CodeView, CommentComposer, CommentThreadsSection } from '../components/repo';
5
+
import { Avatar, ErrorState, inputStyles, textareaStyles } from '../components/common';
6
+
import { CodeView, CommentComposer, CommentThreadsSection, StringPageSkeleton, RepoFormSkeleton } from '../components/repo';
7
7
import {
8
8
getString,
9
9
deleteString,
···
173
173
return (
174
174
<Switch>
175
175
<Match when={stringQuery.isLoading}>
176
-
<LoadingState label="loading string..." />
176
+
<StringPageSkeleton />
177
177
</Match>
178
178
<Match when={stringQuery.error}>
179
179
<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">
···
514
514
return (
515
515
<Switch>
516
516
<Match when={stringQuery.isLoading}>
517
-
<LoadingState label="loading string..." />
517
+
<RepoFormSkeleton titleWidth="w-32" />
518
518
</Match>
519
519
<Match when={stringQuery.error}>
520
520
<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">