skeleton pog

This commit is contained in:
Michael Freno
2025-12-19 19:51:15 -05:00
parent 803d49d7fc
commit 76fb86d519
4 changed files with 235 additions and 77 deletions

View File

@@ -1,5 +1,6 @@
import { Component, For, Show } from "solid-js";
import { Typewriter } from "./Typewriter";
import { SkeletonText, SkeletonBox } from "./SkeletonLoader";
interface Commit {
sha: string;
@@ -43,9 +44,30 @@ export const RecentCommits: Component<{
<Show
when={!props.loading && props.commits && props.commits.length > 0}
fallback={
<div class="text-subtext1 text-xs">
{props.loading ? "Loading..." : "No recent commits"}
</div>
<Show
when={props.loading}
fallback={
<div class="text-subtext1 text-xs">No recent commits</div>
}
>
<div class="flex flex-col gap-2">
<For each={[1, 2, 3]}>
{() => (
<div class="block w-52 rounded-md p-2">
<div class="flex min-w-0 flex-col gap-1">
<SkeletonText class="h-3 w-full" />
<SkeletonText class="h-3 w-3/4" />
<SkeletonText class="h-2 w-16" />
<div class="flex min-w-0 items-center gap-2 overflow-hidden">
<SkeletonBox class="h-4 w-16" />
<SkeletonText class="h-2 w-24" />
</div>
</div>
</div>
)}
</For>
</div>
</Show>
}
>
<div class="flex flex-col gap-2">
@@ -55,7 +77,7 @@ export const RecentCommits: Component<{
href={commit.url}
target="_blank"
rel="noreferrer"
class="hover:bg-surface0 group block rounded-md p-2 transition-all duration-200 ease-in-out hover:scale-[1.02]"
class="hover:bg-surface0 group block w-52 rounded-md p-2 transition-all duration-200 ease-in-out hover:scale-[1.02]"
>
<Typewriter
speed={100}