skeleton pog
This commit is contained in:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user