feat: add skeleton loading components and frontend unit tests

frontend/package.json

@@ -7,6 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy": "npm run build && echo 'Build complete — Render auto-deploys via render.yaml'",
@@ -32,9 +34,14 @@
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.5.2",
     "@vitejs/plugin-react": "^4.3.1",
+    "jsdom": "^25.0.1",
     "storybook": "^8.6.14",
     "vite": "^5.4.2",
-    "vite-plugin-sri3": "^2.0.0"
+    "vite-plugin-sri3": "^2.0.0",
+    "vitest": "^2.1.9"
   }
 }

frontend/src/components/AssetGrid/AssetGrid.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import AssetCard from '../AssetCard/AssetCard';
-import Skeleton from '../Skeleton/Skeleton';
+import AssetCardSkeleton from '../Skeleton/AssetCardSkeleton';
 import Card from '../Card/Card';
 import { FAILED_TO_LOAD_ASSETS } from '../../constants/errors';
 import styles from './AssetGrid.module.css';
@@ -19,17 +19,7 @@ export default function AssetGrid({ assets = [], loading = false, error = null,
     return (
       <div className={styles.grid}>
         {Array.from({ length: 6 }).map((_, i) => (
-          <Card key={i}>
-            <div className={styles.skeletonImage}>
-              <Skeleton variant="rect" height="100%" style={{ borderRadius: 'var(--radius-sm)' }} />
-            </div>
-            <div className={styles.skeletonBody}>
-              <Skeleton variant="text" height="0.75rem" width="30%" style={{ marginBottom: 'var(--spacing-xs)' }} />
-              <Skeleton variant="text" height="1.1em" width="75%" style={{ marginBottom: 'var(--spacing-xs)' }} />
-              <Skeleton variant="text" height="0.9em" width="50%" style={{ marginBottom: 'var(--spacing-sm)' }} />
-              <Skeleton variant="text" height="0.9em" width="40%" />
-            </div>
-          </Card>
+          <AssetCardSkeleton key={i} />
         ))}
       </div>
     );

frontend/src/components/Skeleton/AssetCardSkeleton.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Card from '../Card/Card';
+import Skeleton from './Skeleton';
+import styles from '../AssetCard/AssetCard.module.css';
+import gridStyles from '../AssetGrid/AssetGrid.module.css';
+
+/**
+ * AssetCardSkeleton — animated placeholder matching the AssetCard layout.
+ * Shown while asset data is being fetched.
+ */
+export default function AssetCardSkeleton() {
+  return (
+    <Card className={styles.assetCard}>
+      {/* Image area */}
+      <div className={gridStyles.skeletonImage}>
+        <Skeleton variant="rect" height="100%" style={{ borderRadius: 0 }} />
+      </div>
+
+      {/* Body area */}
+      <div className={`${styles.body} ${gridStyles.skeletonBody}`}>
+        {/* assetType */}
+        <Skeleton variant="text" width="30%" height="0.75rem" />
+        {/* title */}
+        <Skeleton variant="text" width="75%" height="1.1em" />
+        {/* location */}
+        <Skeleton variant="text" width="50%" height="0.9em" />
+        {/* valuation */}
+        <Skeleton variant="text" width="40%" height="0.9em" />
+        {/* footer */}
+        <div className={styles.footer}>
+          <Skeleton variant="text" width="90px" height="0.75rem" />
+          <Skeleton variant="text" width="70px" height="0.75rem" />
+        </div>
+      </div>
+    </Card>
+  );
+}

frontend/src/components/Skeleton/index.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Skeleton from './Skeleton';
+
+/**
+ * TextSkeleton — convenience wrapper for one or more lines of text skeleton.
+ *
+ * @param {number} lines  - Number of text lines to render (default 1).
+ * @param {string} width  - CSS width override for single-line variant.
+ * @param {string} height - CSS height override.
+ */
+export function TextSkeleton({ lines = 1, width, height, style, className, ...rest }) {
+  return (
+    <Skeleton
+      variant="text"
+      lines={lines}
+      width={width}
+      height={height}
+      style={style}
+      className={className}
+      {...rest}
+    />
+  );
+}
+
+/**
+ * ImageSkeleton — convenience wrapper for an image / rect placeholder.
+ *
+ * @param {string} width  - CSS width (default '100%').
+ * @param {string} height - CSS height (default '180px').
+ */
+export function ImageSkeleton({ width = '100%', height = '180px', style, className, ...rest }) {
+  return (
+    <Skeleton
+      variant="rect"
+      width={width}
+      height={height}
+      style={style}
+      className={className}
+      {...rest}
+    />
+  );
+}