From 73b5dda88690e324eff6e4caf88b48bf7101d64d Mon Sep 17 00:00:00 2001
From: dawn <90008@gaze.systems>
Date: Sat, 30 May 2026 19:04:46 +0000
Subject: [PATCH] skeleton loading anim for strings

---
 src/components/repo.tsx | 65 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/pages/profile.tsx | 4 ++--
 src/pages/string.tsx | 8 ++++----
 3 file(s) changed, 71 insertion(s)(+), 6 deletion(s)(-)

diff --git a/src/components/repo.tsx b/src/components/repo.tsx
--- a/src/components/repo.tsx
+++ b/src/components/repo.tsx
@@ -1304,6 +1304,71 @@
 	);
 };
 
+export const StringCardSkeleton: Component = () => (
+	<div class="border border-gray-200 dark:border-gray-700 rounded-sm">
+		<div class="py-4 px-6 rounded bg-white dark:bg-gray-800 flex flex-col gap-2">
+			<div class="flex items-center gap-2">
+				<SkeletonBlock class="h-5 w-1/3" />
+			</div>
+			<div class="space-y-2 mt-1">
+				<SkeletonBlock class="h-4 w-5/6" />
+				<SkeletonBlock class="h-4 w-2/3" />
+			</div>
+			<div class="mt-2 flex gap-4">
+				<SkeletonBlock class="h-3 w-16" />
+				<SkeletonBlock class="h-3 w-16" />
+			</div>
+		</div>
+	</div>
+);
+
+export const StringPageSkeleton: Component = () => (
+	<div class="flex flex-col gap-4">
+		<section class="mb-2 py-2 px-4">
+			<div class="flex flex-col sm:flex-row items-start gap-4 justify-between">
+				<div class="flex flex-col gap-2 w-full sm:w-1/2">
+					<div class="flex items-center gap-2">
+						<SkeletonBlock class="size-6 rounded-full shrink-0" />
+						<SkeletonBlock class="h-5 w-1/4" />
+						<span class="text-gray-400">/</span>
+						<SkeletonBlock class="h-5 w-1/3" />
+					</div>
+					<div class="flex flex-col gap-1 mt-1">
+						<SkeletonBlock class="h-4 w-1/3" />
+					</div>
+				</div>
+				<div class="w-full sm:w-fit flex items-center gap-2">
+					<SkeletonBlock class="h-8 w-24" />
+					<SkeletonBlock class="h-8 w-16" />
+				</div>
+			</div>
+		</section>
+
+		<section class="bg-white dark:bg-gray-800 px-6 py-4 rounded relative w-full shadow-sm">
+			<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">
+				<SkeletonBlock class="h-5 w-1/3 mb-2 md:mb-0" />
+				<SkeletonBlock class="h-5 w-1/4" />
+			</div>
+			<div class="space-y-2 py-2 overflow-hidden">
+				<For each={Array.from({ length: 36 })}>
+					{(_, index) => (
+						<div class="untangled-skeleton-code-line">
+							<SkeletonBlock class="h-4 w-8" />
+							<SkeletonBlock class={
+								index() % 7 === 0 ? 'h-4 w-1/3' : 
+								index() % 5 === 0 ? 'h-4 w-1/2' : 
+								index() % 4 === 0 ? 'h-4 w-3/4' : 
+								index() % 3 === 0 ? 'h-4 w-5/6' : 
+								'h-4 w-11/12'
+							} />
+						</div>
+					)}
+				</For>
+			</div>
+		</section>
+	</div>
+);
+
 export const IssueOrPullRow: Component<{
 	title: string;
 	number: number | string;
diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
--- a/src/pages/profile.tsx
+++ b/src/pages/profile.tsx
@@ -24,7 +24,7 @@
 import { For, Show, Switch, Match, createMemo, createSignal, createEffect, type Component } from 'solid-js';
 import type { Did } from '@atcute/lexicons/syntax';
 import { ErrorState, LoadingState, PlaceholderAvatar, SkeletonBlock, textareaStyles, inputStyles } from '../components/common';
-import { RepoCard, RepoCardSkeleton } from '../components/repo';
+import { RepoCard, RepoCardSkeleton, StringCardSkeleton } from '../components/repo';
 import {
 	listFollowRecords,
 	createFollow,
@@ -1529,7 +1529,7 @@
 														fallback={
 															<div id="strings" class="grid grid-cols-1 gap-4 mb-6">
 																<For each={Array.from({ length: 3 })}>
-																	{() => <RepoCardSkeleton />}
+																	{() => <StringCardSkeleton />}
 																</For>
 															</div>
 														}
diff --git a/src/pages/string.tsx b/src/pages/string.tsx
--- a/src/pages/string.tsx
+++ b/src/pages/string.tsx
@@ -2,8 +2,8 @@
 import { createQuery, useQueryClient } from '@tanstack/solid-query';
 import { Show, Switch, Match, type Component, createSignal, createMemo, createEffect, onCleanup } from 'solid-js';
 import type { ResourceUri } from '@atcute/lexicons/syntax';
-import { Avatar, ErrorState, LoadingState, inputStyles, textareaStyles } from '../components/common';
-import { CodeView, CommentComposer, CommentThreadsSection } from '../components/repo';
+import { Avatar, ErrorState, inputStyles, textareaStyles } from '../components/common';
+import { CodeView, CommentComposer, CommentThreadsSection, StringPageSkeleton, RepoFormSkeleton } from '../components/repo';
 import {
 	getString,
 	deleteString,
@@ -173,7 +173,7 @@
 	return (
 		<Switch>
 			<Match when={stringQuery.isLoading}>
-				<LoadingState label="loading string..." />
+				<StringPageSkeleton />
 			</Match>
 			<Match when={stringQuery.error}>
 				<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">
@@ -514,7 +514,7 @@
 	return (
 		<Switch>
 			<Match when={stringQuery.isLoading}>
-				<LoadingState label="loading string..." />
+				<RepoFormSkeleton titleWidth="w-32" />
 			</Match>
 			<Match when={stringQuery.error}>
 				<div class="p-6 bg-white dark:bg-gray-800 rounded shadow-sm">

--
tangled.sh