feat(report): improve years loading status messaging

src/pages/AnnualReportPage.scss

@@ -26,6 +26,14 @@
   margin: 0 0 48px;
 }
 
+.page-desc.load-summary {
+  margin: 0 0 28px;
+}
+
+.page-desc.load-summary.complete {
+  color: var(--text-secondary);
+}
+
 .report-sections {
   display: flex;
   flex-direction: column;
@@ -83,6 +91,14 @@
   color: var(--text-tertiary);
 }
 
+.year-grid-with-status {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
 .year-grid {
   display: flex;
   flex-wrap: wrap;
@@ -95,7 +111,39 @@
 .report-section .year-grid {
   justify-content: flex-start;
   max-width: none;
-  margin-bottom: 24px;
+  margin-bottom: 0;
+}
+
+.year-grid-with-status .year-grid {
+  flex: 1;
+}
+
+.year-load-status {
+  display: inline-flex;
+  align-items: center;
+  font-size: 12px;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  margin-top: 6px;
+  flex-shrink: 0;
+}
+
+.year-load-status.complete {
+  color: color-mix(in srgb, var(--primary) 80%, var(--text-secondary));
+}
+
+.dot-ellipsis {
+  display: inline-block;
+  width: 0;
+  overflow: hidden;
+  vertical-align: bottom;
+  animation: dot-ellipsis 1.2s steps(4, end) infinite;
+}
+
+.year-load-status.complete .dot-ellipsis,
+.page-desc.load-summary.complete .dot-ellipsis {
+  animation: none;
+  width: 0;
 }
 
 .year-card {
@@ -185,3 +233,7 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+@keyframes dot-ellipsis {
+  to { width: 1.4em; }
+}