Mike/freno-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix left skeleton

Browse Source
This commit is contained in:
Michael Freno
2025-12-22 19:12:12 -05:00
parent a9c9ae023c
commit 87168a42ed
6 changed files with 57 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Bars.tsx
View File

@@ -319,7 +319,7 @@ export function LeftBar() {
"translate-x-0": leftBarVisible()
}}
style={{
"transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)", // Smooth for both revealing and hiding
"transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
"min-width": leftBarSize() > 0 ? `${leftBarSize()}px` : undefined,
"box-shadow": "inset -6px 0 16px -6px rgba(0, 0, 0, 0.1)",
"padding-top": "env(safe-area-inset-top)",
@@ -371,15 +371,15 @@ export function LeftBar() {
fallback={
<For each={[1, 2, 3]}>
{() => (
<div class="flex flex-col">
<div class="flex items-start gap-2">
<div class="flex flex-1 flex-col gap-2">
<SkeletonText class="h-6 w-full" />
<div class="flex w-52 flex-col">
<div class="relative overflow-hidden">
<SkeletonBox class="float-right ml-2 h-12 w-16" />
<div class="flex flex-col">
<SkeletonText class="h-6 w-full" />
<SkeletonText class="mt-1.5 h-6 w-2/3" />
</div>
<SkeletonBox class="h-14 w-16 shrink-0" />
</div>
<SkeletonText class="mt-2 h-6 w-full" />
<SkeletonText class="mt-1.5 h-6 w-1/2" />
</div>
)}
</For>
@@ -390,7 +390,7 @@ export function LeftBar() {
<a
href={`/blog/${post.title}`}
onClick={handleLinkClick}
class="hover:text-subtext0 block transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
class="hover:text-subtext0 block w-52 transition-transform duration-200 ease-in-out hover:-translate-y-0.5 hover:scale-105 hover:font-bold"
>
<Typewriter class="flex flex-col" keepAlive={false}>
<div class="relative overflow-hidden">

7
src/components/SkeletonLoader.tsx
View File

@@ -1,4 +1,3 @@
import { JSX } from "solid-js";
import { Spinner } from "~/components/Spinner";
interface SkeletonProps {
@@ -8,7 +7,7 @@ interface SkeletonProps {
export function SkeletonBox(props: SkeletonProps) {
return (
<div
class={`bg-surface0 text-overlay0 flex items-center justify-center rounded ${props.class || ""}`}
class={`bg-surface0 flex items-center justify-center rounded ${props.class || ""}`}
aria-label="Loading..."
role="status"
>
@@ -20,7 +19,7 @@ export function SkeletonBox(props: SkeletonProps) {
export function SkeletonText(props: SkeletonProps) {
return (
<div
class={`bg-surface0 text-overlay0 inline-flex h-4 items-center rounded px-2 ${props.class || ""}`}
class={`bg-surface0 inline-flex items-center rounded px-2 pt-1 ${props.class || ""}`}
aria-label="Loading..."
role="status"
>
@@ -32,7 +31,7 @@ export function SkeletonText(props: SkeletonProps) {
export function SkeletonCircle(props: SkeletonProps) {
return (
<div
class={`bg-surface0 text-overlay0 flex items-center justify-center rounded-full ${props.class || ""}`}
class={`bg-surface0 flex items-center justify-center rounded-full ${props.class || ""}`}
aria-label="Loading..."
role="status"
>

2
src/components/Spinner.tsx
View File

@@ -47,7 +47,7 @@ export function Spinner(props: SpinnerProps) {
return (
<span
class={`font-mono ${sizeClass()} ${props.class || ""}`}
class={`text-overlay2 font-mono ${sizeClass()} ${props.class || ""}`}
style={style()}
aria-label={props["aria-label"] || "Loading..."}
role="status"