feat: enhance loading states and add hooks configuration

- Introduced loading states in PlotOfTheDay and RelatedSpecs components to prevent CLS.
- Added hooks configuration in settings.json for pre-tool use and session management.
- Updated HomePage to conditionally render PlotOfTheDay based on loading state.
- Adjusted Suspense fallback in SpecPage for better loading experience.
- Bumped pyplots version to 1.1.0.

Author: MarkusNeusinger

.claude/settings.json

@@ -17,5 +17,49 @@
   },
   "env": {
     "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
+  },
+  "hooks": {
+    "PreToolUse": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "serena-hooks remind --client=claude-code"
+          }
+        ]
+      },
+      {
+        "matcher": "mcp__serena__*",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "serena-hooks auto-approve --client=claude-code"
+          }
+        ]
+      }
+    ],
+    "SessionStart": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "serena-hooks activate --client=claude-code"
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "matcher": "",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "serena-hooks cleanup --client=claude-code"
+          }
+        ]
+      }
+    ]
   }
 }

app/src/components/ImagesGrid.tsx

@@ -83,8 +83,9 @@ export function ImagesGrid({
         sx={{
           display: 'flex',
           justifyContent: 'center',
-          alignItems: 'center',
-          my: 8,
+          alignItems: 'flex-start',
+          pt: 8,
+          minHeight: '80vh',
           opacity: 0,
           animation: 'fadeInDelayed 1.5s ease-out 0.3s forwards',
           '@keyframes fadeInDelayed': {

app/src/components/PlotOfTheDay.tsx

@@ -29,14 +29,16 @@ const mono = typography.fontFamily;
 
 export function PlotOfTheDay() {
   const [data, setData] = useState<PlotOfTheDayData | null>(null);
+  const [loading, setLoading] = useState(true);
   const [dismissed, setDismissed] = useState(() => window.sessionStorage.getItem('potd_dismissed') === 'true');
 
   useEffect(() => {
     if (dismissed) return;
     fetch(`${API_URL}/insights/plot-of-the-day`)
       .then(r => { if (!r.ok) throw new Error(); return r.json(); })
       .then(setData)
-      .catch(() => {});
+      .catch(() => {})
+      .finally(() => setLoading(false));
   }, [dismissed]);
 
   const handleDismiss = useCallback((e: React.MouseEvent) => {
@@ -45,7 +47,16 @@ export function PlotOfTheDay() {
     window.sessionStorage.setItem('potd_dismissed', 'true');
   }, []);
 
-  if (!data || dismissed) return null;
+  // Already dismissed — no space needed (user saw page before)
+  if (dismissed) return null;
+
+  // Still loading — reserve space to prevent CLS
+  if (loading) {
+    return <Box sx={{ minHeight: { xs: 280, sm: 200 }, mb: 2 }} />;
+  }
+
+  // Fetch failed or no data — collapse (post-initial-paint, negligible CLS)
+  if (!data) return null;
 
   return (
     <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>

app/src/components/RelatedSpecs.tsx

@@ -38,6 +38,7 @@ interface RelatedSpecsProps {
 
 export function RelatedSpecs({ specId, mode = 'spec', library, onHoverTags }: RelatedSpecsProps) {
   const [related, setRelated] = useState<RelatedSpec[]>([]);
+  const [loading, setLoading] = useState(true);
   const [expanded, setExpanded] = useState(false);
   const prevSpecIdRef = useRef(specId);
 
@@ -49,21 +50,35 @@ export function RelatedSpecs({ specId, mode = 'spec', library, onHoverTags }: Re
 
   useEffect(() => {
     let cancelled = false;
+    setLoading(true);
     const params = new URLSearchParams({ limit: '24', mode });
     if (library && mode === 'full') params.set('library', library);
     fetch(`${API_URL}/insights/related/${specId}?${params}`)
       .then(r => { if (!r.ok) throw new Error(); return r.json(); })
-      .then(data => { if (!cancelled) setRelated(data.related ?? []); })
-      .catch(() => { if (!cancelled) setRelated([]); });
+      .then(data => { if (!cancelled) { setRelated(data.related ?? []); setLoading(false); } })
+      .catch(() => { if (!cancelled) { setRelated([]); setLoading(false); } });
     return () => { cancelled = true; };
   }, [specId, mode, library]);
 
-  if (related.length === 0) return null;
+  // After loading, if no related specs, render nothing
+  if (!loading && related.length === 0) return null;
 
   // Collapsed: CSS hides extra rows via gridAutoRows:0 + overflow:hidden
 
+  // While loading, reserve space without showing the tab bar.
+  // This prevents CLS both when results exist (common) and when they don't (rare).
+  if (loading) {
+    return (
+      <Box sx={{ mt: 1.5, maxWidth: { xs: '100%', md: 1200, lg: 1400, xl: 1600 }, mx: 'auto', minHeight: { xs: 250, sm: 210 } }} />
+    );
+  }
+
   return (
-    <Box sx={{ mt: 1.5, maxWidth: { xs: '100%', md: 1200, lg: 1400, xl: 1600 }, mx: 'auto' }}>
+    <Box sx={{
+      mt: 1.5, maxWidth: { xs: '100%', md: 1200, lg: 1400, xl: 1600 }, mx: 'auto',
+      animation: 'relatedFadeIn 0.4s ease-out',
+      '@keyframes relatedFadeIn': { from: { opacity: 0 }, to: { opacity: 1 } },
+    }}>
       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
         <Tabs
           value={expanded ? 0 : false}

app/src/pages/HomePage.tsx

@@ -168,7 +168,7 @@ export function HomePage() {
       </Helmet>
       <Header stats={stats} onRandom={handleRandom} />
 
-      {isFiltersEmpty(activeFilters) && !loading && <PlotOfTheDay />}
+      {isFiltersEmpty(activeFilters) && <PlotOfTheDay />}
 
       {error && (
         <Alert severity="error" sx={{ mb: 4, maxWidth: 500, mx: 'auto' }}>

app/src/pages/SpecPage.tsx

@@ -394,7 +394,7 @@ export function SpecPage() {
           {specData.description}
         </Typography>
 
-        <Suspense>
+        <Suspense fallback={<Box sx={{ minHeight: 400 }} />}>
         {isOverviewMode ? (
           /* OVERVIEW MODE */
           <>