further page optimizations

Author: tstromberg

assets/styles.css

@@ -804,8 +804,7 @@ a {
 /* Size badges */
 .badge-size {
     font-weight: 700;
-    margin-right: var(--space-1);
-}
+
 
 .badge-size-xxs {
     background: rgb(236 252 203 / 0.5);
@@ -863,17 +862,25 @@ a {
 
 /* Skeleton Loading */
 .skeleton {
-    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-    background-size: 200% 100%;
-    animation: loading 1.5s ease-in-out infinite;
+    background: #f0f0f0;
     border-radius: 4px;
+    position: relative;
+    overflow: hidden;
 }
 
-@keyframes loading {
-    0% { background-position: 200% 0; }
-    100% { background-position: -200% 0; }
+.skeleton::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
+    transform: translateX(-100%);
 }
 
+/* Removed loading animation for performance */
+
 .skeleton-pr-card {
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.1);
@@ -1311,23 +1318,15 @@ a {
     display: inline-block;
     color: var(--color-text-muted);
     font-size: var(--text-sm);
-    animation: pulse 1.5s ease-in-out infinite;
+    opacity: 0.6;
 }
 
 .stat-value.loading {
     color: var(--color-text-muted);
-    animation: pulse 1.5s ease-in-out infinite;
+    opacity: 0.6;
 }
 
-@keyframes pulse {
-    0%,
-    100% {
-        opacity: 0.4;
-    }
-    50% {
-        opacity: 1;
-    }
-}
+/* Removed pulse animation for performance */
 
 .chart-container {
     display: flex;
@@ -1559,19 +1558,7 @@ a {
 }
 
 .floating-icon.pulse {
-    animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-    0% {
-        transform: rotate(-15deg) scale(1);
-    }
-    50% {
-        transform: rotate(-15deg) scale(1.05);
-    }
-    100% {
-        transform: rotate(-15deg) scale(1);
-    }
+    /* Removed animation for performance */
 }
 
 .card-content {
@@ -2838,10 +2825,7 @@ a {
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-left: 0.375rem;
-    animation: pulse 2s ease-in-out infinite;
+    /* Removed animation for performance */
 }
 
-@keyframes pulse {
-    0%, 100% { opacity: 1; transform: scale(1); }
-    50% { opacity: 0.9; transform: scale(1.05); }
-}
+/* Removed pulse animation for performance */

assets/user.js

@@ -1,5 +1,5 @@
 // User PR Dashboard Module for Ready To Review
-import { $, $$, show, hide, escapeHtml } from './utils.js';
+import { $, $$, show, hide, escapeHtml } from './utils.js';\n\n// Request deduplication cache\nconst pendingRequests = new Map();
 
 export const User = (() => {
   "use strict";
@@ -515,13 +515,13 @@ export const User = (() => {
 
     if (state.currentUser) {
       displayContent = `
-        <img src="${state.currentUser.avatar_url}" alt="${state.currentUser.login}" class="user-avatar">
+        <img src="${state.currentUser.avatar_url}" alt="${state.currentUser.login}" class="user-avatar" width="32" height="32">
         <span class="user-name">${state.currentUser.name || state.currentUser.login}</span>
         <button onclick="window.App.logout()" class="btn btn-primary">Logout</button>
       `;
     } else if (viewingUser) {
       displayContent = `
-        <img src="${viewingUser.avatar_url}" alt="${viewingUser.login}" class="user-avatar">
+        <img src="${viewingUser.avatar_url}" alt="${viewingUser.login}" class="user-avatar" width="32" height="32">
         <span class="user-name">Viewing: ${viewingUser.name || viewingUser.login}</span>
         <button id="loginBtn" class="btn btn-primary">Login</button>
       `;
@@ -940,7 +940,7 @@ export const User = (() => {
         </div>
         <div class="pr-meta">
           <div class="pr-meta-left">
-            <img src="${pr.user.avatar_url}" alt="${pr.user.login}" class="author-avatar" loading="lazy">
+            <img src="${pr.user.avatar_url}" alt="${pr.user.login}" class="author-avatar" loading="lazy" width="20" height="20">
             <span class="pr-repo">${pr.repository.full_name}</span>
             <span class="pr-number">#${pr.number}</span>
             <span class="pr-author">by ${pr.user.login}</span>
@@ -1089,7 +1089,7 @@ export const User = (() => {
       .slice(0, maxShow)
       .map(
         (reviewer) =>
-          `<img src="${reviewer.avatar_url}" alt="${reviewer.login}" class="reviewer-avatar" loading="lazy" title="${reviewer.login}">`,
+          `<img src="${reviewer.avatar_url}" alt="${reviewer.login}" class="reviewer-avatar" loading="lazy" width="16" height="16" title="${reviewer.login}">`,
       )
       .join("");
 

index.html

@@ -11,6 +11,12 @@
         <link rel="stylesheet" href="/assets/styles.css" />
         <link rel="icon" href="/favicon.ico" />
         <link rel="preconnect" href="https://api.github.com" />
+        <link rel="dns-prefetch" href="https://api.github.com" />
+        <link rel="preconnect" href="https://avatars.githubusercontent.com" />
+        <link rel="dns-prefetch" href="https://avatars.githubusercontent.com" />
+        <link rel="modulepreload" href="/assets/app.js" />
+        <link rel="modulepreload" href="/assets/user.js" />
+        <link rel="modulepreload" href="/assets/utils.js" />
     </head>
     <body>
         <div id="app">