feat: Introduce skeleton UI component for loading states in the drawer, update ESLint configuration, and refactor tRPC timing middleware.

eslint.config.js

@@ -9,7 +9,7 @@ export default tseslint.config(
   {
     ignores: [".next"],
   },
-  ...compat.extends("next/core-web-vitals"),
+  // ...compat.extends("next/core-web-vitals"),
   {
     files: ["**/*.ts", "**/*.tsx"],
     extends: [

package.json

@@ -9,7 +9,7 @@
     "dev": "next dev --turbo",
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
     "format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
-    "lint": "next lint",
+    "lint": "eslint .",
     "lint:fix": "next lint --fix",
     "preview": "next build && next start",
     "start": "next start",

src/components/Drawer.tsx

@@ -1,27 +1,38 @@
-import { X, MapPin, Phone, Globe, ExternalLink } from "lucide-react";
+import { X, MapPin, Globe, Phone, Coffee, ExternalLink } from "lucide-react";
 import { Card } from "~/components/ui/card";
 import { Button } from "~/components/ui/button";
 import { ScrollArea } from "~/components/ui/scroll-area";
 import { Separator } from "~/components/ui/separator";
-
-interface CoffeeShop {
-    id: number;
-    name: string;
-    description: string;
-    lat: number;
-    lng: number;
-    address: string;
-    phone: string;
-    website: string;
-    image: string;
-}
+import { Skeleton } from "~/components/ui/skeleton";
+import { useState, useEffect } from "react";
 
 interface DrawerProps {
-    shop: CoffeeShop | null;
+    shop: {
+        id: number;
+        name: string;
+        description: string;
+        image: string;
+        address: string;
+        phone: string;
+        website: string;
+        lat: number;
+        lng: number;
+    } | null;
     onClose: () => void;
 }
 
 export default function Drawer({ shop, onClose }: DrawerProps) {
+    const [imageLoading, setImageLoading] = useState(true);
+
+    // Reset loading state when shop changes
+    useEffect(() => {
+        if (shop) {
+            setImageLoading(true);
+        }
+    }, [shop]);
+
+    if (!shop) return null;
+
     return (
         <div
             className={`absolute top-20 left-0 h-[calc(100vh-6rem)] w-full sm:w-[400px] z-30 transform transition-transform duration-300 ease-in-out p-4 pointer-events-none ${shop ? "translate-x-0" : "-translate-x-full"
@@ -30,12 +41,19 @@ export default function Drawer({ shop, onClose }: DrawerProps) {
             {shop && (
                 <Card className="h-full w-full bg-background/60 backdrop-blur-2xl border-border/50 shadow-2xl overflow-hidden flex flex-col gap-0 pointer-events-auto rounded-xl p-0 border-0">
                     {/* Header Image */}
-                    <div className="h-56 relative flex-shrink-0">
+                    <div className="h-56 relative flex-shrink-0 bg-muted/20">
+                        {imageLoading && (
+                            <div className="absolute inset-0 z-10 flex items-center justify-center">
+                                <Skeleton className="h-full w-full absolute inset-0" />
+                                <Coffee className="h-12 w-12 text-muted-foreground/50 animate-pulse relative z-20" />
+                            </div>
+                        )}
                         <div className="absolute inset-0 z-0">
                             <img
                                 src={shop.image}
                                 alt={shop.name}
-                                className="w-full h-full object-cover"
+                                className={`w-full h-full object-cover transition-opacity duration-500 ${imageLoading ? 'opacity-0' : 'opacity-100'}`}
+                                onLoad={() => setImageLoading(false)}
                                 style={{
                                     maskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)',
                                     WebkitMaskImage: 'linear-gradient(to bottom, black 50%, transparent 100%)'

src/components/Map.tsx

@@ -4,8 +4,6 @@ import { MapContainer, TileLayer, Marker } from 'react-leaflet';
 import 'leaflet/dist/leaflet.css';
 import L from 'leaflet';
 import { useState, useEffect } from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { Coffee } from 'lucide-react';
 import { useTheme } from "next-themes";
 import Navbar from "./Navbar";
 import { MapStyleControl } from "./MapStyleControl";
@@ -44,7 +42,7 @@ const Map = ({ shops, onShopSelect }: MapProps) => {
         return new L.DivIcon({
             className: 'custom-icon',
             html: `<div class="w-8 h-8 bg-[#8B4513]/60 backdrop-blur-md rounded-full border border-white/30 shadow-lg flex items-center justify-center">
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M17 8h1a4 4 0 1 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><line x1="6" x2="6" y1="2" y2="4"/><line x1="10" x2="10" y1="2" y2="4"/><line x1="14" x2="14" y1="2" y2="4"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"><path d="M17 8h1a4 4 0 1 1 0 8h-1" /><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z" /><line x1="6" x2="6" y1="2" y2="4" /><line x1="10" x2="10" y1="2" y2="4" /><line x1="14" x2="14" y1="2" y2="4" /></svg>
   </div>`,
             iconSize: [32, 32],
             iconAnchor: [16, 32],

src/components/WelcomeModal.tsx

@@ -37,7 +37,7 @@ export function WelcomeModal() {
                     <div className="mx-auto bg-primary/10 p-3 rounded-full mb-4 w-fit">
                         <Coffee className="h-8 w-8 text-primary" />
                     </div>
-                    <DialogTitle className="text-center text-2xl font-serif">Welcome to the Lewisburg Coffee Map</DialogTitle>
+                    <DialogTitle className="text-center text-2xl font-serif">Welcome to the Lewisburg&nbsp;Coffee&nbsp;Map</DialogTitle>
                     <DialogDescription className="text-center text-muted-foreground pt-2">
                         Discover the best coffee spots in Lewisburg, PA.
                     </DialogDescription>

src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "~/lib/utils"
+
+function Skeleton({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn("animate-pulse rounded-md bg-muted", className)}
+            {...props}
+        />
+    )
+}
+
+export { Skeleton }

src/server/api/trpc.ts

@@ -71,24 +71,21 @@ export const createCallerFactory = t.createCallerFactory;
 export const createTRPCRouter = t.router;
 
 /**
- * Middleware for timing procedure execution and adding an artificial delay in development.
+ * Middleware for timing procedure execution and adding an artificial delay.
  *
- * You can remove this if you don't like it, but it can help catch unwanted waterfalls by simulating
- * network latency that would occur in production but not in local development.
+ * You can remove this if you don't want to do it.
  */
-const timingMiddleware = t.middleware(async ({ next, path }) => {
-  const start = Date.now();
-
+const timingMiddleware = t.middleware(async ({ next }) => {
   if (t._config.isDev) {
-    // artificial delay in dev
+    // artificial delay in dev 100-500ms
     const waitMs = Math.floor(Math.random() * 400) + 100;
     await new Promise((resolve) => setTimeout(resolve, waitMs));
   }
-
   const result = await next();
-
-  const end = Date.now();
-
+  if (t._config.isDev) {
+    // const durationMs = Date.now() - start;
+    // console.log(`[TRPC] ${path} took ${durationMs}ms to execute`);
+  }
   return result;
 });