skeleton loading anim for strings
1302 unmodified linesExpand all1303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375369 unmodified linesExpand all1302 unmodified linesExpand all </div> );};
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; state: 'open' | 'closed' | 'merged';369 unmodified linesExpand all22 unmodified lines232425262727282930311496 unmodified linesExpand all1528152915301531153215321533153415351536124 unmodified linesExpand all22 unmodified linesimport { createQuery, useQueryClient } from '@tanstack/solid-query';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, deleteFollow,1496 unmodified linesExpand all when={!stringsQuery.isLoading} fallback={ <div id="strings" class="grid grid-cols-1 gap-4 mb-6"> <For each={Array.from({ length: 3 })}> {() => <RepoCardSkeleton />} {() => <StringCardSkeleton />} </For> </div> } >124 unmodified linesExpand all1234565678910161 unmodified linesExpand all172173174175176176177178179180332 unmodified linesExpand all513514515516517517518519520521118 unmodified linesExpand allimport { A, useParams, useNavigate } from '@solidjs/router';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, updateString,161 unmodified linesExpand all
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"> <ErrorState message={getErrorMessage(stringQuery.error).toLowerCase()} />332 unmodified linesExpand all
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"> <ErrorState message={getErrorMessage(stringQuery.error).toLowerCase()} />118 unmodified linesExpand all