soconnor/personal-website
1
0
Fork 0
mirror of https://github.com/soconnor0919/personal-website.git synced 2025-12-12 23:04:43 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add ImageWithSkeleton component and refactor Sidebar to use it.

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-10 03:20:46 -05:00
parent 82b32b70bd
commit 50536727a4
2 changed files with 56 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/Sidebar.tsx
View File

@@ -1,16 +1,13 @@
"use client"; "use client";
import Image from "next/image";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { name, contact, location } from "~/lib/data"; import { name, contact, location } from "~/lib/data";
import { useState } from "react"; import { ImageWithSkeleton } from "~/components/ui/image-with-skeleton";
import { Skeleton } from "~/components/ui/skeleton";
export function Sidebar() { export function Sidebar() {
const pathname = usePathname(); const pathname = usePathname();
const isHomePage = pathname === "/"; const isHomePage = pathname === "/";
const [isImageLoading, setIsImageLoading] = useState(true);
return ( return (
<> <>
@@ -18,19 +15,15 @@ export function Sidebar() {
{isHomePage && ( {isHomePage && (
<div className="w-full space-y-4 px-6 pb-2 pt-6 sm:px-8 lg:hidden"> <div className="w-full space-y-4 px-6 pb-2 pt-6 sm:px-8 lg:hidden">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<div className="relative h-24 w-24 overflow-hidden rounded-2xl border border-border/50 shadow-sm"> <ImageWithSkeleton
{isImageLoading && <Skeleton className="absolute inset-0 h-full w-full" />} src="/headshot.png"
<Image alt={`${name[0]?.first}&nbsp;${name[0]?.last}`}
src="/headshot.png" width={240}
alt={`${name[0]?.first}&nbsp;${name[0]?.last}`} height={240}
width={240} containerClassName="h-24 w-24 rounded-2xl border border-border/50 shadow-sm"
height={240} className="object-cover"
className={`object-cover duration-700 ease-in-out ${isImageLoading ? "scale-110 blur-2xl grayscale" : "scale-100 blur-0 grayscale-0" priority
}`} />
onLoad={() => setIsImageLoading(false)}
priority
/>
</div>
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
<h2 className="text-xl font-bold transition-colors hover:text-primary"> <h2 className="text-xl font-bold transition-colors hover:text-primary">
{name[0]?.first}&nbsp;{name[0]?.last} {name[0]?.first}&nbsp;{name[0]?.last}
@@ -82,19 +75,15 @@ export function Sidebar() {
{/* Profile Section */} {/* Profile Section */}
<div className="flex-shrink-0 border-b border-border/50 px-8 py-8"> <div className="flex-shrink-0 border-b border-border/50 px-8 py-8">
<div className="flex flex-col items-center space-y-4"> <div className="flex flex-col items-center space-y-4">
<div className="relative h-40 w-40 overflow-hidden border border-border/50 rounded-3xl shadow-sm"> <ImageWithSkeleton
{isImageLoading && <Skeleton className="absolute inset-0 h-full w-full" />} src="/headshot.png"
<Image alt={`${name[0]?.first} ${name[0]?.last}`}
src="/headshot.png" width={400}
alt={`${name[0]?.first} ${name[0]?.last}`} height={400}
width={400} containerClassName="h-40 w-40 border border-border/50 rounded-3xl shadow-sm"
height={400} className="h-full w-full object-cover"
className={`h-full w-full object-cover duration-700 ease-in-out ${isImageLoading ? "scale-110 blur-2xl grayscale" : "scale-100 blur-0 grayscale-0" priority
}`} />
onLoad={() => setIsImageLoading(false)}
priority
/>
</div>
<div className="text-center"> <div className="text-center">
<h2 className="text-lg font-semibold tracking-tight"> <h2 className="text-lg font-semibold tracking-tight">
{name[0]?.first} {name[0]?.last} {name[0]?.first} {name[0]?.last}

37
src/components/ui/image-with-skeleton.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client";
import { useState } from "react";
import Image, { ImageProps } from "next/image";
import { Skeleton } from "~/components/ui/skeleton";
import { cn } from "~/lib/utils";
interface ImageWithSkeletonProps extends ImageProps {
containerClassName?: string;
}
export function ImageWithSkeleton({
className,
containerClassName,
onLoad,
...props
}: ImageWithSkeletonProps) {
const [isLoading, setIsLoading] = useState(true);
return (
<div className={cn("relative overflow-hidden", containerClassName)}>
{isLoading && <Skeleton className="absolute inset-0 h-full w-full" />}
<Image
className={cn(
"duration-700 ease-in-out",
isLoading ? "scale-110 blur-2xl grayscale" : "scale-100 blur-0 grayscale-0",
className
)}
onLoad={(e) => {
setIsLoading(false);
if (onLoad) onLoad(e);
}}
{...props}
/>
</div>
);
}