Add unified Loader component and improve loading states

- Create minimal Loader component with pulsing squares matching heatmap design
- Update SpotifyNowPlaying to use Loader and inherit blog font (removed monospace)
- Add smooth fade-in transition to SpotifyNowPlaying
- Replace search page loading bar with clean Loader component
- Replace KnowledgeMap spinner with Loader component

All loaders now use consistent, minimal design following Japanese aesthetic.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: benthecoder

app/search/page.tsx

@@ -3,6 +3,7 @@
 import React, { useState, useEffect, Suspense } from "react";
 import Link from "next/link";
 import { useSearchParams, usePathname, useRouter } from "next/navigation";
+import Loader from "@/components/Loader";
 
 interface SearchResult {
   content: string;
@@ -24,13 +25,8 @@ interface SearchResult {
 
 const LoadingComponent = () => {
   return (
-    <div className="flex flex-col items-center space-y-4 py-8">
-      <div className="w-48 h-1 bg-light-border/20 dark:bg-dark-tag rounded-full overflow-hidden">
-        <div className="w-full h-full bg-light-accent dark:bg-dark-accent animate-loading-bar" />
-      </div>
-      <span className="text-sm text-light-accent/70 dark:text-dark-accent/70">
-        Searching posts...
-      </span>
+    <div className="py-8">
+      <Loader text="searching posts..." size="md" />
     </div>
   );
 };
@@ -323,14 +319,7 @@ export default function SearchPage() {
     <Suspense
       fallback={
         <div className="max-w-3xl mx-auto px-4 py-8">
-          <div className="flex flex-col items-center space-y-4 py-8">
-            <div className="w-48 h-1 bg-light-border/20 dark:bg-dark-tag rounded-full overflow-hidden">
-              <div className="w-full h-full bg-light-accent dark:bg-dark-accent animate-loading-bar" />
-            </div>
-            <span className="text-sm text-light-accent/70 dark:text-dark-accent/70">
-              Loading search...
-            </span>
-          </div>
+          <Loader text="loading search..." size="md" />
         </div>
       }
     >

components/KnowledgeMap.tsx

@@ -5,6 +5,7 @@ import { useTheme } from "next-themes";
 import { scaleLinear } from "d3-scale";
 import { zoom as d3Zoom } from "d3-zoom";
 import { select } from "d3-selection";
+import Loader from "./Loader";
 
 interface Article {
   id: string;
@@ -273,10 +274,7 @@ export default function KnowledgeMap({
   if (loading) {
     return (
       <div className={`flex items-center justify-center ${className}`}>
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-400 mx-auto mb-2"></div>
-          <p className="text-xs text-gray-500">loading...</p>
-        </div>
+        <Loader text="loading knowledge map..." size="lg" />
       </div>
     );
   }

components/Loader.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+interface LoaderProps {
+  text?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export default function Loader({ text, size = "md" }: LoaderProps) {
+  const sizeClasses = {
+    sm: "w-[6px] h-[6px]",
+    md: "w-[7px] h-[7px]",
+    lg: "w-[8px] h-[8px]",
+  };
+
+  const gapClasses = {
+    sm: "gap-1",
+    md: "gap-1.5",
+    lg: "gap-2",
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-3">
+      <div className={`flex items-center ${gapClasses[size]}`}>
+        <div
+          className={`${sizeClasses[size]} rounded-[1px] bg-japanese-sumiiro dark:bg-japanese-shironezu animate-pulse`}
+          style={{ animationDelay: "0ms", animationDuration: "1400ms" }}
+        />
+        <div
+          className={`${sizeClasses[size]} rounded-[1px] bg-japanese-sumiiro dark:bg-japanese-shironezu animate-pulse`}
+          style={{ animationDelay: "200ms", animationDuration: "1400ms" }}
+        />
+        <div
+          className={`${sizeClasses[size]} rounded-[1px] bg-japanese-sumiiro dark:bg-japanese-shironezu animate-pulse`}
+          style={{ animationDelay: "400ms", animationDuration: "1400ms" }}
+        />
+      </div>
+      {text && (
+        <p className="text-xs text-japanese-sumiiro/50 dark:text-japanese-shironezu/50 font-light">
+          {text}
+        </p>
+      )}
+    </div>
+  );
+}

components/SpotifyNowPlaying.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
 import useSWR from "swr";
 import Image from "next/image";
+import Loader from "./Loader";
 
 interface NowPlayingData {
   isPlaying: boolean;
@@ -34,33 +35,50 @@ interface RecentlyPlayedData {
 const fetcher = (url: string) => fetch(url).then((r) => r.json());
 
 export default function SpotifyNowPlaying() {
-  const { data: nowPlaying } = useSWR<NowPlayingData>(
-    "/api/spotify/now-playing",
-    fetcher,
-    {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const { data: nowPlaying, isLoading: nowPlayingLoading } =
+    useSWR<NowPlayingData>("/api/spotify/now-playing", fetcher, {
       refreshInterval: 60000,
-    }
-  );
+    });
 
-  const { data: recentlyPlayed } = useSWR<RecentlyPlayedData>(
-    !nowPlaying?.isPlaying ? "/api/spotify/recently-played" : null,
-    fetcher,
-    {
-      refreshInterval: 300000,
+  const { data: recentlyPlayed, isLoading: recentlyPlayedLoading } =
+    useSWR<RecentlyPlayedData>(
+      !nowPlaying?.isPlaying ? "/api/spotify/recently-played" : null,
+      fetcher,
+      {
+        refreshInterval: 300000,
+      }
+    );
+
+  useEffect(() => {
+    if (nowPlaying || recentlyPlayed) {
+      const timer = setTimeout(() => setIsVisible(true), 100);
+      return () => clearTimeout(timer);
     }
-  );
+  }, [nowPlaying, recentlyPlayed]);
+
+  const isLoading = nowPlayingLoading || recentlyPlayedLoading;
+
+  if (isLoading) {
+    return (
+      <div className="mt-8 pt-6 border-t border-japanese-shiraumenezu dark:border-dark-tag">
+        <Loader text="loading music..." size="sm" />
+      </div>
+    );
+  }
 
   if (!nowPlaying && !recentlyPlayed) {
     return null;
   }
 
   return (
     <div
+      className={`transition-opacity duration-700 ${isVisible ? "opacity-100" : "opacity-0"}`}
       style={{
         marginTop: "32px",
         paddingLeft: "0px",
         paddingRight: "0px",
-        fontFamily: "monospace",
         fontSize: "14px",
         color: "#888888",
         lineHeight: "1.6",