chore(deps): update dependency vite to v7.3.1

frontend/package.json

@@ -29,11 +29,11 @@
     "ts-proto": "^2.8.3",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.48.1",
-    "vite": "npm:rolldown-vite@7.2.5"
+    "vite": "npm:rolldown-vite@7.3.1"
   },
   "pnpm": {
     "overrides": {
-      "vite": "npm:rolldown-vite@7.2.5"
+      "vite": "npm:rolldown-vite@7.3.1"
     }
   }
 }

frontend/pnpm-lock.yaml

@@ -5,7 +5,7 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
-  vite: npm:rolldown-vite@7.2.5
+  vite: npm:rolldown-vite@7.3.1
 
 importers:
 
@@ -38,7 +38,7 @@ importers:
         version: 19.2.3(@types/react@19.2.7)
       '@vitejs/plugin-react':
         specifier: ^5.1.2
-        version: 5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))
+        version: 5.1.2(rolldown-vite@7.3.1(@types/node@24.10.1))
       eslint:
         specifier: ^9.39.1
         version: 9.39.1
@@ -61,8 +61,8 @@ importers:
         specifier: ^8.48.1
         version: 8.48.1(eslint@9.39.1)(typescript@5.9.3)
       vite:
-        specifier: npm:rolldown-vite@7.2.5
+        specifier: npm:rolldown-vite@7.3.1
-        version: rolldown-vite@7.2.5(@types/node@24.10.1)
+        version: rolldown-vite@7.3.1(@types/node@24.10.1)
 
 packages:
 
@@ -234,99 +234,90 @@ packages:
   '@napi-rs/wasm-runtime@1.1.0':
     resolution: {integrity: sha512-Fq6DJW+Bb5jaWE69/qOE0D1TUN9+6uWhCeZpdnSBk14pjLcCWR7Q8n49PTSPHazM37JqrsdpEthXy2xn6jWWiA==}
 
-  '@oxc-project/runtime@0.97.0':
+  '@oxc-project/runtime@0.101.0':
-    resolution: {integrity: sha512-yH0zw7z+jEws4dZ4IUKoix5Lh3yhqIJWF9Dc8PWvhpo7U7O+lJrv7ZZL4BeRO0la8LBQFwcCewtLBnVV7hPe/w==}
+    resolution: {integrity: sha512-t3qpfVZIqSiLQ5Kqt/MC4Ge/WCOGrrcagAdzTcDaggupjiGxUx4nJF2v6wUCXWSzWHn5Ns7XLv13fCJEwCOERQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
-  '@oxc-project/types@0.97.0':
+  '@oxc-project/types@0.101.0':
-    resolution: {integrity: sha512-lxmZK4xFrdvU0yZiDwgVQTCvh2gHWBJCBk5ALsrtsBWhs0uDIi+FTOnXRQeQfs304imdvTdaakT/lqwQ8hkOXQ==}
+    resolution: {integrity: sha512-nuFhqlUzJX+gVIPPfuE6xurd4lST3mdcWOhyK/rZO0B9XWMKm79SuszIQEnSMmmDhq1DC8WWVYGVd+6F93o1gQ==}
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.50':
+  '@rolldown/binding-android-arm64@1.0.0-beta.53':
-    resolution: {integrity: sha512-XlEkrOIHLyGT3avOgzfTFSjG+f+dZMw+/qd+Y3HLN86wlndrB/gSimrJCk4gOhr1XtRtEKfszpadI3Md4Z4/Ag==}
+    resolution: {integrity: sha512-Ok9V8o7o6YfSdTTYA/uHH30r3YtOxLD6G3wih/U9DO0ucBBFq8WPt/DslU53OgfteLRHITZny9N/qCUxMf9kjQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.50':
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.53':
-    resolution: {integrity: sha512-+JRqKJhoFlt5r9q+DecAGPLZ5PxeLva+wCMtAuoFMWPoZzgcYrr599KQ+Ix0jwll4B4HGP43avu9My8KtSOR+w==}
+    resolution: {integrity: sha512-yIsKqMz0CtRnVa6x3Pa+mzTihr4Ty+Z6HfPbZ7RVbk1Uxnco4+CUn7Qbm/5SBol1JD/7nvY8rphAgyAi7Lj6Vg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.50':
+  '@rolldown/binding-darwin-x64@1.0.0-beta.53':
-    resolution: {integrity: sha512-fFXDjXnuX7/gQZQm/1FoivVtRcyAzdjSik7Eo+9iwPQ9EgtA5/nB2+jmbzaKtMGG3q+BnZbdKHCtOacmNrkIDA==}
+    resolution: {integrity: sha512-GTXe+mxsCGUnJOFMhfGWmefP7Q9TpYUseHvhAhr21nCTgdS8jPsvirb0tJwM3lN0/u/cg7bpFNa16fQrjKrCjQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.50':
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.53':
-    resolution: {integrity: sha512-F1b6vARy49tjmT/hbloplzgJS7GIvwWZqt+tAHEstCh0JIh9sa8FAMVqEmYxDviqKBaAI8iVvUREm/Kh/PD26Q==}
+    resolution: {integrity: sha512-9Tmp7bBvKqyDkMcL4e089pH3RsjD3SUungjmqWtyhNOxoQMh0fSmINTyYV8KXtE+JkxYMPWvnEt+/mfpVCkk8w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.50':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.53':
-    resolution: {integrity: sha512-U6cR76N8T8M6lHj7EZrQ3xunLPxSvYYxA8vJsBKZiFZkT8YV4kjgCO3KwMJL0NOjQCPGKyiXO07U+KmJzdPGRw==}
+    resolution: {integrity: sha512-a1y5fiB0iovuzdbjUxa7+Zcvgv+mTmlGGC4XydVIsyl48eoxgaYkA3l9079hyTyhECsPq+mbr0gVQsFU11OJAQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.50':
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.53':
-    resolution: {integrity: sha512-ONgyjofCrrE3bnh5GZb8EINSFyR/hmwTzZ7oVuyUB170lboza1VMCnb8jgE6MsyyRgHYmN8Lb59i3NKGrxrYjw==}
+    resolution: {integrity: sha512-bpIGX+ov9PhJYV+wHNXl9rzq4F0QvILiURn0y0oepbQx+7stmQsKA0DhPGwmhfvF856wq+gbM8L92SAa/CBcLg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.50':
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.53':
-    resolution: {integrity: sha512-L0zRdH2oDPkmB+wvuTl+dJbXCsx62SkqcEqdM+79LOcB+PxbAxxjzHU14BuZIQdXcAVDzfpMfaHWzZuwhhBTcw==}
+    resolution: {integrity: sha512-bGe5EBB8FVjHBR1mOLOPEFg1Lp3//7geqWkU5NIhxe+yH0W8FVrQ6WRYOap4SUTKdklD/dC4qPLREkMMQ855FA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.50':
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.53':
-    resolution: {integrity: sha512-gyoI8o/TGpQd3OzkJnh1M2kxy1Bisg8qJ5Gci0sXm9yLFzEXIFdtc4EAzepxGvrT2ri99ar5rdsmNG0zP0SbIg==}
+    resolution: {integrity: sha512-qL+63WKVQs1CMvFedlPt0U9PiEKJOAL/bsHMKUDS6Vp2Q+YAv/QLPu8rcvkfIMvQ0FPU2WL0aX4eWwF6e/GAnA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.50':
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.53':
-    resolution: {integrity: sha512-zti8A7M+xFDpKlghpcCAzyOi+e5nfUl3QhU023ce5NCgUxRG5zGP2GR9LTydQ1rnIPwZUVBWd4o7NjZDaQxaXA==}
+    resolution: {integrity: sha512-VGl9JIGjoJh3H8Mb+7xnVqODajBmrdOOb9lxWXdcmxyI+zjB2sux69br0hZJDTyLJfvBoYm439zPACYbCjGRmw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.50':
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.53':
-    resolution: {integrity: sha512-eZUssog7qljrrRU9Mi0eqYEPm3Ch0UwB+qlWPMKSUXHNqhm3TvDZarJQdTevGEfu3EHAXJvBIe0YFYr0TPVaMA==}
+    resolution: {integrity: sha512-B4iIserJXuSnNzA5xBLFUIjTfhNy7d9sq4FUMQY3GhQWGVhS2RWWzzDnkSU6MUt7/aHUrep0CdQfXUJI9D3W7A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.50':
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.53':
-    resolution: {integrity: sha512-nmCN0nIdeUnmgeDXiQ+2HU6FT162o+rxnF7WMkBm4M5Ds8qTU7Dzv2Wrf22bo4ftnlrb2hKK6FSwAJSAe2FWLg==}
+    resolution: {integrity: sha512-BUjAEgpABEJXilGq/BPh7jeU3WAJ5o15c1ZEgHaDWSz3LB881LQZnbNJHmUiM4d1JQWMYYyR1Y490IBHi2FPJg==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.50':
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.53':
-    resolution: {integrity: sha512-7kcNLi7Ua59JTTLvbe1dYb028QEPaJPJQHqkmSZ5q3tJueUeb6yjRtx8mw4uIqgWZcnQHAR3PrLN4XRJxvgIkA==}
+    resolution: {integrity: sha512-s27uU7tpCWSjHBnxyVXHt3rMrQdJq5MHNv3BzsewCIroIw3DJFjMH1dzCPPMUFxnh1r52Nf9IJ/eWp6LDoyGcw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.50':
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.53':
-    resolution: {integrity: sha512-lL70VTNvSCdSZkDPPVMwWn/M2yQiYvSoXw9hTLgdIWdUfC3g72UaruezusR6ceRuwHCY1Ayu2LtKqXkBO5LIwg==}
+    resolution: {integrity: sha512-cjWL/USPJ1g0en2htb4ssMjIycc36RvdQAx1WlXnS6DpULswiUTVXPDesTifSKYSyvx24E0YqQkEm0K/M2Z/AA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [ia32]
-    os: [win32]
-
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.50':
-    resolution: {integrity: sha512-4qU4x5DXWB4JPjyTne/wBNPqkbQU8J45bl21geERBKtEittleonioACBL1R0PsBu0Aq21SwMK5a9zdBkWSlQtQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/pluginutils@1.0.0-beta.50':
-    resolution: {integrity: sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==}
-
   '@rolldown/pluginutils@1.0.0-beta.53':
     resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
 
@@ -425,7 +416,7 @@ packages:
     resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: npm:rolldown-vite@7.3.1
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -897,13 +888,13 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
-  rolldown-vite@7.2.5:
+  rolldown-vite@7.3.1:
-    resolution: {integrity: sha512-u09tdk/huMiN8xwoiBbig197jKdCamQTtOruSalOzbqGje3jdHiV0njQlAW0YvzoahkirFePNQ4RYlfnRQpXZA==}
+    resolution: {integrity: sha512-LYzdNAjRHhF2yA4JUQm/QyARyi216N2rpJ0lJZb8E9FU2y5v6Vk+xq/U4XBOxMefpWixT5H3TslmAHm1rqIq2w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
-      esbuild: ^0.25.0
+      esbuild: ^0.27.0
       jiti: '>=1.21.0'
       less: ^4.0.0
       sass: ^1.70.0
@@ -937,8 +928,8 @@ packages:
       yaml:
         optional: true
 
-  rolldown@1.0.0-beta.50:
+  rolldown@1.0.0-beta.53:
-    resolution: {integrity: sha512-JFULvCNl/anKn99eKjOSEubi0lLmNqQDAjyEMME2T4CwezUDL0i6t1O9xZsu2OMehPnV2caNefWpGF+8TnzB6A==}
+    resolution: {integrity: sha512-Qd9c2p0XKZdgT5AYd+KgAMggJ8ZmCs3JnS9PTMWkyUfteKlfmKtxJbWTHkVakxwXs1Ub7jrRYVeFeF7N0sQxyw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -1268,56 +1259,51 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@oxc-project/runtime@0.97.0': {}
+  '@oxc-project/runtime@0.101.0': {}
 
-  '@oxc-project/types@0.97.0': {}
+  '@oxc-project/types@0.101.0': {}
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.50':
+  '@rolldown/binding-android-arm64@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.50':
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.50':
+  '@rolldown/binding-darwin-x64@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.50':
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.50':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.50':
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.50':
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.50':
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.50':
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.50':
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.50':
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.53':
     dependencies:
       '@napi-rs/wasm-runtime': 1.1.0
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.50':
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.50':
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.53':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.50':
-    optional: true
-
-  '@rolldown/pluginutils@1.0.0-beta.50': {}
-
   '@rolldown/pluginutils@1.0.0-beta.53': {}
 
   '@tybys/wasm-util@0.10.1':
@@ -1454,7 +1440,7 @@ snapshots:
       '@typescript-eslint/types': 8.48.1
       eslint-visitor-keys: 4.2.1
 
-  '@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))':
+  '@vitejs/plugin-react@5.1.2(rolldown-vite@7.3.1(@types/node@24.10.1))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -1462,7 +1448,7 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.53
       '@types/babel__core': 7.20.5
       react-refresh: 0.18.0
-      vite: rolldown-vite@7.2.5(@types/node@24.10.1)
+      vite: rolldown-vite@7.3.1(@types/node@24.10.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -1870,38 +1856,37 @@ snapshots:
 
   resolve-from@4.0.0: {}
 
-  rolldown-vite@7.2.5(@types/node@24.10.1):
+  rolldown-vite@7.3.1(@types/node@24.10.1):
     dependencies:
-      '@oxc-project/runtime': 0.97.0
+      '@oxc-project/runtime': 0.101.0
       fdir: 6.5.0(picomatch@4.0.3)
       lightningcss: 1.30.2
       picomatch: 4.0.3
       postcss: 8.5.6
-      rolldown: 1.0.0-beta.50
+      rolldown: 1.0.0-beta.53
       tinyglobby: 0.2.15
     optionalDependencies:
       '@types/node': 24.10.1
       fsevents: 2.3.3
 
-  rolldown@1.0.0-beta.50:
+  rolldown@1.0.0-beta.53:
     dependencies:
-      '@oxc-project/types': 0.97.0
+      '@oxc-project/types': 0.101.0
-      '@rolldown/pluginutils': 1.0.0-beta.50
+      '@rolldown/pluginutils': 1.0.0-beta.53
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-beta.50
+      '@rolldown/binding-android-arm64': 1.0.0-beta.53
-      '@rolldown/binding-darwin-arm64': 1.0.0-beta.50
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.53
-      '@rolldown/binding-darwin-x64': 1.0.0-beta.50
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.53
-      '@rolldown/binding-freebsd-x64': 1.0.0-beta.50
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.53
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.50
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.53
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.50
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.53
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.50
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.53
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.50
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.53
-      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.50
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.53
-      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.50
+      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.53
-      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.50
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.53
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.50
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.53
-      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.50
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.53
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.50
 
   scheduler@0.27.0: {}
 

frontend/src/App.tsx

@@ -172,7 +172,7 @@ function App() {
         </div>
         <ShaderBackground theme={theme} />
         <Routes>
-          <Route path="/" element={<PersonList people={people} onShowToast={addToast} />} />
+          <Route path="/" element={<PersonList people={people} loading={isLoading} onShowToast={addToast} />} />
           <Route path="/games" element={<GameList onShowToast={addToast} />} />
           <Route path="/filter" element={<GameFilter />} />
           <Route path="/person/:name" element={<PersonDetails />} />

frontend/src/ErrorBoundary.tsx

@@ -0,0 +1,48 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { ErrorState } from "./components/EmptyState";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  public handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <ErrorState
+          message={this.state.error?.message || "An unexpected error occurred"}
+          onRetry={this.handleReset}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

frontend/src/GameDetails.tsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import { Game, Source } from "../items";
 import { apiFetch, get_is_admin } from "./api";
+import { LoadingState, EmptyState, ErrorState } from "./components/EmptyState";
 
 interface Props {
   onShowToast?: (message: string, type?: "success" | "error" | "info") => void;
@@ -11,26 +12,32 @@ export function GameDetails({ onShowToast }: Props) {
   const { title } = useParams<{ title: string }>();
   const navigate = useNavigate();
   const [game, setGame] = useState<Game | null>(null);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(!!title);
+  const [error, setError] = useState<string | null>(title ? null : "Game title is missing");
 
   const isAdmin = get_is_admin();
 
   useEffect(() => {
     if (!title) return;
 
-    apiFetch(`/api/game/${encodeURIComponent(title)}`)
+    (async () => {
-      .then(async (res) => {
+      try {
-        if (!res.ok) throw new Error("Game not found");
+        const res = await apiFetch(`/api/game/${encodeURIComponent(title)}`);
-        return Game.decode(new Uint8Array(await res.arrayBuffer()));
+        if (!res.ok) {
-      })
+          if (res.status === 404) {
-      .then((data) => {
+            throw new Error("Game not found");
-        setGame(data);
+          }
-        setLoading(false);
+          throw new Error("Failed to load game");
-      })
+        }
-      .catch((err) => {
+        const buffer = await res.arrayBuffer();
+        setGame(Game.decode(new Uint8Array(buffer)));
+      } catch (err) {
         console.error(err);
+        setError(err instanceof Error ? err.message : "Failed to load game");
+      } finally {
         setLoading(false);
-      });
+      }
+    })();
   }, [title]);
 
   const handleDelete = async () => {
@@ -59,8 +66,9 @@ export function GameDetails({ onShowToast }: Props) {
     }
   };
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingState message="Loading game details..." />;
-  if (!game) return <div>Game not found</div>;
+  if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />;
+  if (!game) return <EmptyState icon="🎮" title="Game not found" description="This game doesn't exist or has been deleted" />;
 
   const getExternalLink = () => {
     if (game.source === Source.STEAM) {

frontend/src/GameFilter.tsx

@@ -5,9 +5,11 @@ import "./GameFilter.css";
 import { useGameFilter } from "./hooks/useGameFilter";
 import { PersonSelector } from "./components/PersonSelector";
 import { FilteredGamesList } from "./components/FilteredGamesList";
+import { LoadingState } from "./components/EmptyState";
 
 export function GameFilter() {
   const [people, setPeople] = useState<Person[]>([]);
+  const [loading, setLoading] = useState(true);
   const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
 
   const { filteredGames, gameToPositive } = useGameFilter(
@@ -16,15 +18,22 @@ export function GameFilter() {
   );
 
   useEffect(() => {
-    apiFetch("/api")
+    (async () => {
-      .then((res) => res.arrayBuffer())
+      try {
-      .then((buffer) => {
+        const res = await apiFetch("/api");
+        const buffer = await res.arrayBuffer();
         const list = PersonListProto.decode(new Uint8Array(buffer));
         setPeople(list.person);
-      })
+      } catch (err) {
-      .catch((err) => console.error("Failed to fetch people:", err));
+        console.error("Failed to fetch people:", err);
+      } finally {
+        setLoading(false);
+      }
+    })();
   }, []);
 
+  if (loading) return <LoadingState message="Loading people..." />;
+
   const togglePerson = (name: string) => {
     const newSelected = new Set(selectedPeople);
     if (newSelected.has(name)) {

frontend/src/GameList.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo, useCallback } from "react";
 import {
   Game,
   Source,
@@ -12,6 +12,7 @@ import { Link, useLocation } from "react-router-dom";
 import { apiFetch, get_auth_status } from "./api";
 import { GameImage } from "./GameImage";
 import type { ToastType } from "./Toast";
+import { EmptyState } from "./components/EmptyState";
 
 interface Props {
   onShowToast?: (message: string, type?: ToastType) => void;
@@ -26,10 +27,22 @@ export function GameList({ onShowToast }: Props) {
   const [price, setPrice] = useState(0);
   const [remoteId, setRemoteId] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const [titleError, setTitleError] = useState("");
+  const [playersError, setPlayersError] = useState("");
   const [remoteIdError, setRemoteIdError] = useState("");
   const [opinions, setOpinions] = useState<Opinion[]>([]);
+  const [gamesLoading, setGamesLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
 
-  const fetchGames = () => {
+  const filteredGames = useMemo(() => {
+    if (!searchQuery) return games;
+    return games.filter(game =>
+      game.title.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [games, searchQuery]);
+
+  const fetchGames = useCallback(() => {
+    setGamesLoading(true);
     apiFetch("/api/games")
       .then((res) => res.arrayBuffer())
       .then((buffer) => {
@@ -38,10 +51,15 @@ export function GameList({ onShowToast }: Props) {
           setGames(list.games);
         } catch (e) {
           console.error("Failed to decode games:", e);
+          onShowToast?.("Failed to load games", "error");
         }
       })
-      .catch(console.error);
+      .catch((err) => {
-  };
+        console.error(err);
+        onShowToast?.("Failed to fetch games", "error");
+      })
+      .finally(() => setGamesLoading(false));
+  }, [onShowToast]);
 
   useEffect(() => {
     get_auth_status().then((user) => {
@@ -76,20 +94,42 @@ export function GameList({ onShowToast }: Props) {
 
   useEffect(() => {
     fetchGames();
-  }, []);
+  }, [fetchGames]);
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (remoteId === 0) {
+    setTitleError("");
-      setRemoteIdError("Remote ID must be greater than 0");
+    setPlayersError("");
-      return;
+    setRemoteIdError("");
+
+    let hasErrors = false;
+
+    if (!title.trim()) {
+      setTitleError("Game title is required");
+      hasErrors = true;
     }
 
-    setRemoteIdError("");
+    if (minPlayers < 1) {
+      setPlayersError("Minimum players must be at least 1");
+      hasErrors = true;
+    }
+
+    if (maxPlayers < minPlayers) {
+      setPlayersError("Maximum players cannot be less than minimum players");
+      hasErrors = true;
+    }
+
+    if (remoteId === 0) {
+      setRemoteIdError("Remote ID must be greater than 0");
+      hasErrors = true;
+    }
+
+    if (hasErrors) return;
+
     setIsSubmitting(true);
     const game = {
-      title,
+      title: title.trim(),
       source,
       minPlayers,
       maxPlayers,
@@ -109,14 +149,11 @@ export function GameList({ onShowToast }: Props) {
 
       if (res.ok) {
         onShowToast?.("Game added successfully!", "success");
-        setTitle("");
+        clearForm();
-        setMinPlayers(1);
-        setMaxPlayers(1);
-        setPrice(0);
-        setRemoteId(0);
         fetchGames();
       } else {
-        onShowToast?.("Failed to add game. Please try again.", "error");
+        const errorText = await res.text();
+        onShowToast?.(errorText || "Failed to add game. Please try again.", "error");
       }
     } catch (err) {
       console.error(err);
@@ -126,6 +163,17 @@ export function GameList({ onShowToast }: Props) {
     }
   };
 
+  const clearForm = () => {
+    setTitle("");
+    setMinPlayers(1);
+    setMaxPlayers(1);
+    setPrice(0);
+    setRemoteId(0);
+    setTitleError("");
+    setPlayersError("");
+    setRemoteIdError("");
+  };
+
   const formCardStyles: React.CSSProperties = {
     background:
       "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
@@ -307,12 +355,23 @@ export function GameList({ onShowToast }: Props) {
                 <input
                   type="text"
                   value={title}
-                  onChange={(e) => setTitle(e.target.value)}
+                  onChange={(e) => {
+                    setTitle(e.target.value);
+                    if (titleError) setTitleError("");
+                  }}
                   required
                   placeholder="Enter game title..."
-                  style={inputStyles}
+                  style={{
+                    ...inputStyles,
+                    borderColor: titleError ? "#f44336" : undefined
+                  }}
                   className="add-game-input"
                 />
+                {titleError && (
+                  <div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
+                    {titleError}
+                  </div>
+                )}
               </div>
 
               <div style={inputGroupStyles}>
@@ -352,9 +411,15 @@ export function GameList({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={minPlayers}
-                    onChange={(e) => setMinPlayers(Number(e.target.value))}
+                    onChange={(e) => {
+                      setMinPlayers(Number(e.target.value));
+                      if (playersError) setPlayersError("");
+                    }}
                     min="1"
-                    style={inputStyles}
+                    style={{
+                      ...inputStyles,
+                      borderColor: playersError ? "#f44336" : undefined
+                    }}
                     className="add-game-input"
                   />
                 </div>
@@ -363,13 +428,24 @@ export function GameList({ onShowToast }: Props) {
                   <input
                     type="number"
                     value={maxPlayers}
-                    onChange={(e) => setMaxPlayers(Number(e.target.value))}
+                    onChange={(e) => {
+                      setMaxPlayers(Number(e.target.value));
+                      if (playersError) setPlayersError("");
+                    }}
                     min="1"
-                    style={inputStyles}
+                    style={{
+                      ...inputStyles,
+                      borderColor: playersError ? "#f44336" : undefined
+                    }}
                     className="add-game-input"
                   />
                 </div>
               </div>
+              {playersError && (
+                <div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
+                  {playersError}
+                </div>
+              )}
             </div>
 
             <div style={dividerStyles}></div>
@@ -425,6 +501,19 @@ export function GameList({ onShowToast }: Props) {
               </div>
             </div>
 
+            <div style={{ display: "flex", gap: "0.75rem", marginTop: "1rem" }}>
+              <button
+                type="button"
+                onClick={clearForm}
+                disabled={isSubmitting || (!title && minPlayers === 1 && maxPlayers === 1 && price === 0 && remoteId === 0)}
+                style={{
+                  ...submitButtonStyles,
+                  background: "var(--tertiary-bg)",
+                  flex: 1
+                }}
+              >
+                Clear
+              </button>
               <button
                 type="submit"
                 disabled={isSubmitting}
@@ -452,6 +541,7 @@ export function GameList({ onShowToast }: Props) {
                   </>
                 )}
               </button>
+            </div>
           </form>
         </div>
       </div>
@@ -465,16 +555,89 @@ export function GameList({ onShowToast }: Props) {
       </style>
 
       <div style={{ marginTop: "3rem" }}>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "1rem",
+            flexWrap: "wrap",
+            gap: "1rem"
+          }}
+        >
           <h3
             id="existing-games"
             style={{
               scrollMarginBottom: "0",
+              margin: 0
             }}
           >
-          Existing Games
+            Existing Games {filteredGames.length > 0 && <span style={{ fontSize: "0.7em", color: "var(--text-muted)" }}>({filteredGames.length})</span>}
           </h3>
+          <input
+            type="text"
+            placeholder="🔍 Search games..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{
+              padding: "0.5rem 1rem",
+              fontSize: "0.9rem",
+              minWidth: "200px"
+            }}
+          />
+        </div>
+        {gamesLoading ? (
+          <div className="grid-container">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i}
+                style={{
+                  backgroundColor: "var(--secondary-alt-bg)",
+                  border: "1px solid var(--border-color)",
+                  borderRadius: "5px",
+                  padding: "1rem",
+                  minHeight: "100px",
+                  animation: "shimmer 1.5s infinite"
+                }}
+              >
+                <div
+                  style={{
+                    width: "70%",
+                    height: "20px",
+                    backgroundColor: "var(--tertiary-bg)",
+                    borderRadius: "4px",
+                    marginBottom: "0.75rem",
+                    animation: "shimmer 1.5s infinite"
+                  }}
+                ></div>
+                <div
+                  style={{
+                    width: "40%",
+                    height: "40px",
+                    backgroundColor: "var(--tertiary-bg)",
+                    borderRadius: "8px",
+                    marginTop: "0.5rem",
+                    animation: "shimmer 1.5s infinite 0.2s"
+                  }}
+                ></div>
+              </div>
+            ))}
+            <style>{`
+              @keyframes shimmer {
+                0%, 100% { opacity: 0.5; }
+                50% { opacity: 1; }
+              }
+            `}</style>
+          </div>
+        ) : filteredGames.length === 0 ? (
+          <EmptyState
+            icon="🎮"
+            title={searchQuery ? "No games found" : "No games yet"}
+            description={searchQuery ? "Try a different search term" : "Add your first game to get started"}
+          />
+        ) : (
           <ul className="grid-container">
-          {games.map((game) => {
+          {filteredGames.map((game) => {
             const opinion = opinions.find((op) => op.title === game.title);
             function handleOpinion(title: string, number: number): void {
               if (number == 2) {
@@ -628,6 +791,7 @@ export function GameList({ onShowToast }: Props) {
             );
           })}
         </ul>
+        )}
       </div>
     </div>
   );

frontend/src/Login.tsx

@@ -9,13 +9,27 @@ export function Login({ onLogin }: LoginProps) {
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<{ username?: string, password?: string }>({});
+
+  const validateForm = () => {
+    const errors: { username?: string, password?: string } = {};
+    if (!username.trim()) errors.username = "Username is required";
+    if (!password) errors.password = "Password is required";
+    setFieldErrors(errors);
+    return Object.keys(errors).length === 0;
+  };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
+    if (!validateForm()) return;
+
+    setIsSubmitting(true);
+
     try {
-      const req = LoginRequest.create({ username, password });
+      const req = LoginRequest.create({ username: username.trim(), password });
       const body = LoginRequest.encode(req).finish();
 
       const res = await fetch("/auth/login", {
@@ -32,45 +46,109 @@ export function Login({ onLogin }: LoginProps) {
       if (response.success) {
         onLogin(response.token);
       } else {
-        setError(response.message);
+        setError(response.message || "Login failed");
       }
     } catch (err) {
       console.error("Login error:", err);
-      setError("Failed to login");
+      setError("An unexpected error occurred. Please try again.");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
   return (
     <div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
-      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Login</h2>
+      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>🎮 Login</h2>
       <form onSubmit={handleSubmit} className="form-group">
         <div className="form-group">
           <label>Username</label>
           <input
             type="text"
             value={username}
-            onChange={(e) => setUsername(e.target.value)}
+            onChange={(e) => {
+              setUsername(e.target.value);
+              if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
+            }}
             placeholder="Enter your username"
+            style={{
+              borderColor: fieldErrors.username ? "#f44336" : undefined,
+              borderWidth: fieldErrors.username ? "2px" : undefined
+            }}
           />
+          {fieldErrors.username && (
+            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
+              {fieldErrors.username}
+            </span>
+          )}
         </div>
         <div className="form-group">
           <label>Password</label>
           <input
             type="password"
             value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
+            }}
             placeholder="Enter your password"
+            style={{
+              borderColor: fieldErrors.password ? "#f44336" : undefined,
+              borderWidth: fieldErrors.password ? "2px" : undefined
+            }}
           />
+          {fieldErrors.password && (
+            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
+              {fieldErrors.password}
+            </span>
+          )}
         </div>
-        <button type="submit" style={{ marginTop: "1rem" }}>
+        <button
-          Login
+          type="submit"
+          style={{ marginTop: "1rem", width: "100%", opacity: isSubmitting ? 0.7 : 1, cursor: isSubmitting ? "not-allowed" : "pointer" }}
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? (
+            <>
+              <span
+                style={{
+                  width: "14px",
+                  height: "14px",
+                  border: "2px solid rgba(255,255,255,0.3)",
+                  borderTopColor: "white",
+                  borderRadius: "50%",
+                  animation: "spin 0.8s linear infinite",
+                  display: "inline-block",
+                  marginRight: "0.5rem"
+                }}
+              ></span>
+              Logging in...
+            </>
+          ) : (
+            "Login"
+          )}
         </button>
       </form>
       {error && (
-        <p style={{ color: "#ff6b6b", marginTop: "1rem", textAlign: "center" }}>
+        <div
-          {error}
+          style={{
-        </p>
+            backgroundColor: "rgba(244, 67, 54, 0.1)",
+            border: "1px solid rgba(244, 67, 54, 0.3)",
+            color: "#ff6b6b",
+            padding: "1rem",
+            borderRadius: "8px",
+            marginTop: "1rem",
+            textAlign: "center",
+            fontSize: "0.9rem"
+          }}
+        >
+          ⚠️ {error}
+        </div>
       )}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
     </div>
   );
 }

frontend/src/PersonDetails.tsx

@@ -3,32 +3,49 @@ import { Link, useParams } from "react-router-dom";
 import { Person } from "../items";
 import { apiFetch } from "./api";
 import { GameImage } from "./GameImage";
+import { LoadingState, EmptyState } from "./components/EmptyState";
 
 export const PersonDetails = () => {
   const { name } = useParams<{ name: string }>();
   const [person, setPerson] = useState<Person | null>(null);
+  const [loading, setLoading] = useState(!!name);
+  const [error, setError] = useState<string | null>(name ? null : "Person name is missing");
 
   useEffect(() => {
-    if (name) {
+    if (!name) return;
-      apiFetch(`/api/${name}`)
+
-        .then((res) => res.arrayBuffer())
+    (async () => {
-        .then((buffer) => {
       try {
+        const res = await apiFetch(`/api/${name}`);
+        if (!res.ok) {
+          throw new Error("Person not found");
+        }
+        const buffer = await res.arrayBuffer();
         setPerson(Person.decode(new Uint8Array(buffer)));
       } catch (e) {
         console.error("Failed to decode person:", e);
+        setError(e instanceof Error ? e.message : "Failed to load person data");
+      } finally {
+        setLoading(false);
       }
-        })
+    })();
-        .catch(console.error);
-    }
   }, [name]);
 
-  if (!person) return <div>Loading...</div>;
+  if (loading) return <LoadingState message="Loading person details..." />;
+  if (error) return <EmptyState icon="⚠️" title="Error" description={error} />;
+  if (!person) return <EmptyState icon="👤" title="Person not found" description="This person doesn't exist" />;
 
   return (
     <div>
       <div style={{ marginBottom: "2rem" }}>
         <h2>{person.name}</h2>
+        {person.opinion.length === 0 ? (
+          <EmptyState
+            icon="🎮"
+            title="No opinions yet"
+            description={`${person.name} hasn't shared any game opinions`}
+          />
+        ) : (
           <ul className="grid-container">
             {person.opinion.map((op, i) => (
               <Link
@@ -50,6 +67,7 @@ export const PersonDetails = () => {
               </Link>
             ))}
           </ul>
+        )}
       </div>
     </div>
   );

frontend/src/PersonList.tsx

@@ -1,24 +1,36 @@
 import { Person } from "../items";
 import { Link } from "react-router-dom";
-import { useState } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { get_auth_status, refresh_state, get_is_admin } from "./api";
 import type { ToastType } from "./Toast";
+import { EmptyState } from "./components/EmptyState";
 import "./PersonList.css"
 
 interface Props {
   people: Person[];
+  loading?: boolean;
   onShowToast?: (message: string, type?: ToastType) => void;
 }
 
-export const PersonList = ({ people, onShowToast }: Props) => {
+export const PersonList = ({ people, loading = false, onShowToast }: Props) => {
   const [current_user, set_current_user] = useState<string>("");
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
 
+  useEffect(() => {
     get_auth_status().then((res) => {
       if (res) {
         set_current_user(res.username);
       }
     });
+  }, []);
+
+  const filteredPeople = useMemo(() => {
+    if (!searchQuery) return people;
+    return people.filter(person =>
+      person.name.toLowerCase().includes(searchQuery.toLowerCase())
+    );
+  }, [people, searchQuery]);
 
   const handleRefresh = async () => {
     setIsRefreshing(true);
@@ -44,9 +56,23 @@ export const PersonList = ({ people, onShowToast }: Props) => {
           justifyContent: "space-between",
           alignItems: "center",
           marginBottom: "1rem",
+          flexWrap: "wrap",
+          gap: "1rem"
         }}
       >
-        <h2>People List</h2>
+        <h2>People List {filteredPeople.length > 0 && <span style={{ fontSize: "0.8em", color: "var(--text-muted)" }}>({filteredPeople.length})</span>}</h2>
+        <div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
+          <input
+            type="text"
+            placeholder="🔍 Search people..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{
+              padding: "0.5rem 1rem",
+              fontSize: "0.9rem",
+              minWidth: "200px"
+            }}
+          />
           {isAdmin && (
             <button
               onClick={handleRefresh}
@@ -85,8 +111,58 @@ export const PersonList = ({ people, onShowToast }: Props) => {
             </button>
           )}
         </div>
+      </div>
+      {loading ? (
         <div className="grid-container">
-        {people.map((person, index) => {
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div
+              key={i}
+              style={{
+                backgroundColor: "var(--secondary-alt-bg)",
+                border: "1px solid var(--border-color)",
+                borderRadius: "5px",
+                padding: "10px",
+                minHeight: "60px",
+                animation: "shimmer 1.5s infinite"
+              }}
+            >
+              <div
+                style={{
+                  width: "60%",
+                  height: "20px",
+                  backgroundColor: "var(--tertiary-bg)",
+                  borderRadius: "4px",
+                  marginBottom: "0.5rem",
+                  animation: "shimmer 1.5s infinite"
+                }}
+              ></div>
+              <div
+                style={{
+                  width: "40%",
+                  height: "16px",
+                  backgroundColor: "var(--tertiary-bg)",
+                  borderRadius: "4px",
+                  animation: "shimmer 1.5s infinite 0.2s"
+                }}
+              ></div>
+            </div>
+          ))}
+          <style>{`
+            @keyframes shimmer {
+              0%, 100% { opacity: 0.5; }
+              50% { opacity: 1; }
+            }
+          `}</style>
+        </div>
+      ) : filteredPeople.length === 0 ? (
+        <EmptyState
+          icon="👥"
+          title={searchQuery ? "No people found" : "No people in list"}
+          description={searchQuery ? "Try a different search term" : "Add people to get started"}
+        />
+      ) : (
+        <div className="grid-container">
+          {filteredPeople.map((person, index) => {
             if (person.name.toLowerCase() === current_user.toLowerCase()) {
               return (
                 <Link
@@ -100,6 +176,9 @@ export const PersonList = ({ people, onShowToast }: Props) => {
                   }}
                 >
                   <h3>{person.name}</h3>
+                  <div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
+                    {person.opinion.length} opinion(s)
+                  </div>
                 </Link>
               );
             }
@@ -116,10 +195,14 @@ export const PersonList = ({ people, onShowToast }: Props) => {
                 }}
               >
                 <h3>{person.name}</h3>
+                <div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
+                  {person.opinion.length} opinion(s)
+                </div>
               </Link>
             );
           })}
         </div>
+      )}
     </div>
   );
 };

frontend/src/components/EmptyState.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from "react";
+
+interface EmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+}
+
+export function EmptyState({ icon = "📭", title, description, action }: EmptyStateProps) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center",
+        background: "var(--secondary-alt-bg)",
+        borderRadius: "16px",
+        border: "1px dashed var(--border-color)",
+        color: "var(--text-muted)"
+      }}
+    >
+      <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>{icon}</div>
+      <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>{title}</h3>
+      {description && <p style={{ margin: "0 0 1.5rem 0", fontSize: "0.95rem" }}>{description}</p>}
+      {action}
+    </div>
+  );
+}
+
+export function LoadingState({ message = "Loading..." }: { message?: string }) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center"
+      }}
+    >
+      <div
+        style={{
+          width: "40px",
+          height: "40px",
+          border: "4px solid rgba(255, 255, 255, 0.2)",
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite",
+          margin: "0 auto 1rem"
+        }}
+      ></div>
+      <p style={{ color: "var(--text-muted)", margin: 0 }}>{message}</p>
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}
+
+export function ErrorState({ message, onRetry }: { message: string, onRetry?: () => void }) {
+  return (
+    <div
+      style={{
+        padding: "3rem 2rem",
+        textAlign: "center",
+        background: "rgba(244, 67, 54, 0.1)",
+        borderRadius: "16px",
+        border: "1px solid rgba(244, 67, 54, 0.3)"
+      }}
+    >
+      <div style={{ fontSize: "3rem", marginBottom: "1rem" }}>⚠️</div>
+      <h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>Something went wrong</h3>
+      <p style={{ margin: "0 0 1.5rem 0", color: "var(--text-muted)", fontSize: "0.95rem" }}>{message}</p>
+      {onRetry && (
+        <button
+          onClick={onRetry}
+          style={{
+            background: "var(--accent-color)",
+            border: "none",
+            padding: "0.75rem 1.5rem",
+            borderRadius: "8px",
+            color: "white",
+            fontWeight: 600,
+            cursor: "pointer"
+          }}
+        >
+          🔄 Try Again
+        </button>
+      )}
+    </div>
+  );
+}

frontend/src/components/FilteredGamesList.tsx

@@ -1,5 +1,6 @@
 import { Link } from "react-router-dom";
 import { GameImage } from "../GameImage";
+import { EmptyState } from "./EmptyState";
 
 interface FilteredGamesListProps {
   filteredGames: string[];
@@ -12,7 +13,15 @@ export function FilteredGamesList({
   gameToPositive,
   selectedPeopleCount,
 }: FilteredGamesListProps) {
-  if (selectedPeopleCount === 0) return null;
+  if (selectedPeopleCount === 0) {
+    return (
+      <EmptyState
+        icon="👥"
+        title="Select people to find games"
+        description="Choose one or more people from the list above to see games they would play"
+      />
+    );
+  }
 
   return (
     <div>
@@ -66,29 +75,12 @@ export function FilteredGamesList({
           })}
         </ul>
       ) : (
-        <EmptyState />
+        <EmptyState
+          icon="🔍"
+          title="No games found"
+          description="Try selecting fewer people or adding more opinions"
+        />
       )}
     </div>
   );
 }
-
-function EmptyState() {
-  return (
-    <div
-      style={{
-        padding: "3rem",
-        textAlign: "center",
-        background: "var(--secondary-alt-bg)",
-        borderRadius: "16px",
-        border: "1px dashed var(--border-color)",
-        color: "var(--text-muted)",
-      }}
-    >
-      <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
-      <p>No games found where all selected people would play.</p>
-      <p style={{ fontSize: "0.9rem" }}>
-        Try selecting fewer people or adding more opinions!
-      </p>
-    </div>
-  );
-}

frontend/src/components/LoadingSpinner.tsx

@@ -0,0 +1,28 @@
+export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
+  const sizeMap = {
+    small: "16px",
+    medium: "24px",
+    large: "32px"
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
+      <div
+        style={{
+          width: sizeMap[size],
+          height: sizeMap[size],
+          border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
+          borderTopColor: "currentColor",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite"
+        }}
+      ></div>
+      {text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
+      <style>{`
+        @keyframes spin {
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/src/components/SkeletonLoader.tsx

@@ -0,0 +1,65 @@
+export function SkeletonLoader({ width, height, count = 1 }: { width?: string | number, height?: string | number, count?: number }) {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            width: width || "100%",
+            height: height || "60px",
+            backgroundColor: "var(--secondary-alt-bg)",
+            borderRadius: "8px",
+            animation: "shimmer 1.5s infinite",
+            marginBottom: count > 1 ? "1rem" : undefined
+          }}
+        ></div>
+      ))}
+      <style>{`
+        @keyframes shimmer {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </>
+  );
+}
+
+export function CardSkeleton() {
+  return (
+    <div
+      style={{
+        backgroundColor: "var(--secondary-alt-bg)",
+        border: "1px solid var(--border-color)",
+        borderRadius: "5px",
+        padding: "10px",
+        minHeight: "80px"
+      }}
+    >
+      <div
+        style={{
+          width: "60%",
+          height: "20px",
+          backgroundColor: "var(--tertiary-bg)",
+          borderRadius: "4px",
+          marginBottom: "0.5rem",
+          animation: "shimmer 1.5s infinite"
+        }}
+      ></div>
+      <div
+        style={{
+          width: "40%",
+          height: "16px",
+          backgroundColor: "var(--tertiary-bg)",
+          borderRadius: "4px",
+          animation: "shimmer 1.5s infinite 0.2s"
+        }}
+      ></div>
+      <style>{`
+        @keyframes shimmer {
+          0%, 100% { opacity: 0.5; }
+          50% { opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+}

frontend/src/main.tsx

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
+import { ErrorBoundary } from './ErrorBoundary'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
+    <ErrorBoundary>
       <App />
+    </ErrorBoundary>
   </StrictMode>,
 )