soconnor/lewisburg-coffee
1
0
Fork 0
mirror of https://github.com/soconnor0919/lewisburg-coffee.git synced 2026-02-04 15:46:32 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance map loading state with skeleton UI and update viewport height units to dvh

Browse Source
This commit is contained in:
Sean O'Connor
2025-12-05 02:22:17 -05:00
parent 1ec199a737
commit 604cd14698
3 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/page.tsx
View File

@@ -12,7 +12,7 @@ export default function HomePage() {
const [isDiscoveryOpen, setIsDiscoveryOpen] = useState(true);
return (
<main className="relative h-screen w-screen overflow-hidden bg-black text-white font-serif">
<main className="relative h-dvh w-screen overflow-hidden bg-black text-white font-serif">
{/* Map Background */}
<div className="absolute inset-0 z-0">
<MapLoader

2
src/components/Drawer.tsx
View File

@@ -45,7 +45,7 @@ export default function Drawer({ shop, shops, onSelect, onClose, isOpen }: Drawe
return (
<div
className={`absolute top-20 left-0 h-[calc(100vh-6rem)] w-full sm:w-[400px] z-30 p-4 pointer-events-none transition-transform duration-300 ease-in-out ${isOpen || shop ? 'translate-x-0' : '-translate-x-full'}`}
className={`absolute top-20 left-0 h-[calc(100dvh-6rem)] w-full sm:w-[400px] z-30 p-4 pointer-events-none transition-transform duration-300 ease-in-out ${isOpen || shop ? 'translate-x-0' : '-translate-x-full'}`}
>
<Card className="h-full w-full bg-background/40 backdrop-blur-2xl border-border/50 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0 transition-all duration-300">
{shop ? (

28
src/components/MapLoader.tsx
View File

@@ -1,11 +1,9 @@
"use client";
import dynamic from "next/dynamic";
const Map = dynamic(() => import("./Map"), {
ssr: false,
loading: () => <div className="w-full h-full bg-gray-100 animate-pulse flex items-center justify-center text-gray-400">Loading Map...</div>
});
import { useState, useEffect } from "react";
import { Skeleton } from "~/components/ui/skeleton";
import { Coffee } from "lucide-react";
interface CoffeeShop {
id: number;
@@ -28,5 +26,25 @@ interface MapLoaderProps {
}
export default function MapLoader({ shops, onShopSelect, selectedShop, isDiscoveryOpen, onToggleDiscovery }: MapLoaderProps) {
const [isLoading, setIsLoading] = useState(true);
const Map = dynamic(() => import("./Map"), {
ssr: false,
loading: () => (
<div className="w-full h-full relative bg-background">
<Skeleton className="w-full h-full absolute inset-0" />
<div className="absolute inset-0 flex items-center justify-center">
<Coffee className="h-16 w-16 text-muted-foreground/50 animate-pulse" />
</div>
</div>
),
});
useEffect(() => {
// Small delay to ensure smooth transition
const timer = setTimeout(() => setIsLoading(false), 100);
return () => clearTimeout(timer);
}, []);
return <Map shops={shops} onShopSelect={onShopSelect} selectedShop={selectedShop} isDiscoveryOpen={isDiscoveryOpen} onToggleDiscovery={onToggleDiscovery} />;
}