feat: add comprehensive loading feedback (#18)

frontend/src/styles.scss

@@ -137,6 +137,67 @@ p {
   text-transform: uppercase;
 }
 
+.skeleton-card {
+  display: grid;
+  align-content: start;
+  gap: 14px;
+  min-height: 220px;
+}
+
+.load-error,
+.refresh-error {
+  padding: 20px;
+  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
+  border-radius: 16px;
+  background: var(--danger-soft);
+  color: var(--danger);
+}
+
+.load-error {
+  text-align: center;
+}
+
+.load-error h2,
+.load-error p,
+.refresh-error p {
+  margin-bottom: 10px;
+}
+
+.skeleton-line {
+  display: block;
+  width: 100%;
+  height: 14px;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    var(--surface-soft) 25%,
+    var(--border) 50%,
+    var(--surface-soft) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+.skeleton-line-short {
+  width: 34%;
+}
+
+.skeleton-line-medium {
+  width: 68%;
+}
+
+.skeleton-line-title {
+  width: 55%;
+  height: 24px;
+  margin-top: 30px;
+}
+
+@keyframes skeleton-shimmer {
+  to {
+    background-position-x: -200%;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
@@ -145,4 +206,8 @@ p {
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
+
+  .skeleton-line {
+    animation: none;
+  }
 }