Merge pull request #1073 from adamvangrover/bolt-optimize-css-injections-5504699732228063706

⚡ Bolt: Remove inline style injections to prevent layout thrashing

Author: adamvangrover

services/webapp/client/src/components/promptAlpha/NewsWire.tsx

@@ -94,15 +94,6 @@ export const NewsWire: React.FC = () => {
             ))}
         </div>
 
-        <style>{`
-            .animate-spin-slow { animation: spin 4s linear infinite; }
-            @keyframes spin { 100% { transform: rotate(360deg); } }
-            @keyframes flash {
-                0% { background-color: rgba(34, 211, 238, 0.2); }
-                100% { background-color: transparent; }
-            }
-            .animate-flash { animation: flash 1s ease-out; }
-        `}</style>
     </div>
   );
 };

services/webapp/client/src/components/promptAlpha/TickerTape.tsx

@@ -29,15 +29,6 @@ export const TickerTape: React.FC = () => {
         ))}
         {/* Duplicate for seamless loop if needed, simplified here */}
       </div>
-      <style>{`
-        @keyframes marquee {
-          0% { transform: translateX(0); }
-          100% { transform: translateX(-100%); }
-        }
-        .animate-marquee {
-          animation: marquee 30s linear infinite;
-        }
-      `}</style>
     </div>
   );
 };

services/webapp/client/src/index.css

@@ -50,3 +50,61 @@
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+/* Extracted Animations to prevent layout thrashing */
+
+.animate-spin-slow { animation: spin 4s linear infinite; }
+@keyframes flash {
+  0% { background-color: rgba(34, 211, 238, 0.2); }
+  100% { background-color: transparent; }
+}
+.animate-flash { animation: flash 1s ease-out; }
+
+@keyframes marquee {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-100%); }
+}
+.animate-marquee {
+  animation: marquee 30s linear infinite;
+}
+
+@keyframes scan-synthesizer {
+  0% { transform: translateY(-100%); opacity: 0; }
+  50% { opacity: 1; }
+  100% { transform: translateY(1000%); opacity: 0; }
+}
+
+@keyframes scan-evolution {
+  0% { top: 0%; }
+  100% { top: 100%; }
+}
+.scan-line {
+  width: 100%;
+  height: 2px;
+  background: rgba(168, 85, 247, 0.3);
+  opacity: 0.5;
+  animation: scan-evolution 4s linear infinite;
+  position: fixed;
+  top: 0;
+  pointer-events: none;
+  z-index: 50;
+}
+.glass-panel {
+  background: rgba(13, 20, 31, 0.7);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(59, 130, 246, 0.15);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+}
+.glass-panel-active {
+  border: 1px solid rgba(168, 85, 247, 0.4);
+  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
+}
+.text-glow {
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; }
+::-webkit-scrollbar-track { background: #0f172a; }
+::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: #475569; }

services/webapp/client/src/pages/EvolutionHub.tsx

@@ -234,42 +234,6 @@ const EvolutionHub = () => {
 
     return (
         <div className="min-h-screen bg-[#050b14] text-slate-200 font-mono relative overflow-hidden flex flex-col">
-            {/* Custom CSS */}
-            <style>{`
-                @keyframes scan {
-                    0% { top: 0%; }
-                    100% { top: 100%; }
-                }
-                .scan-line {
-                    width: 100%;
-                    height: 2px;
-                    background: rgba(168, 85, 247, 0.3);
-                    opacity: 0.5;
-                    animation: scan 4s linear infinite;
-                    position: fixed;
-                    top: 0;
-                    pointer-events: none;
-                    z-index: 50;
-                }
-                .glass-panel {
-                    background: rgba(13, 20, 31, 0.7);
-                    backdrop-filter: blur(12px);
-                    border: 1px solid rgba(59, 130, 246, 0.15);
-                    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-                }
-                .glass-panel-active {
-                    border: 1px solid rgba(168, 85, 247, 0.4);
-                    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
-                }
-                .text-glow {
-                    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
-                }
-                /* Scrollbar */
-                ::-webkit-scrollbar { width: 8px; }
-                ::-webkit-scrollbar-track { background: #0f172a; }
-                ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
-                ::-webkit-scrollbar-thumb:hover { background: #475569; }
-            `}</style>
 
             <div className="scan-line"></div>
 

services/webapp/client/src/pages/Synthesizer.tsx

@@ -327,22 +327,14 @@ const Synthesizer: React.FC = () => {
                         {Object.entries(conviction).map(([agent, val]) => (
                             <div key={agent} style={{ textAlign: 'center', padding: '10px', background: `rgba(0, 255, 0, ${val * 0.3})`, border: `1px solid rgba(0,255,0,${val})`, borderRadius: '4px', position: 'relative', overflow: 'hidden' }}>
                                 {/* Animated scanning bar */}
-                                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'rgba(255,255,255,0.5)', animation: 'scan 3s linear infinite' }}></div>
+                                <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: '2px', background: 'rgba(255,255,255,0.5)', animation: 'scan-synthesizer 3s linear infinite' }}></div>
                                 <div style={{ fontSize: '0.7rem', fontWeight: 'bold' }}>{agent}</div>
                                 <div style={{ fontSize: '1.2rem', color: '#fff' }}>{(val * 100).toFixed(0)}%</div>
                                 {val > 0.8 && <div style={{ fontSize: '0.55rem', color: '#000', background: '#0f0', padding: '2px', marginTop: '5px', borderRadius: '2px' }}>HIGH CONVICTION</div>}
                                 {val < 0.3 && <div style={{ fontSize: '0.55rem', color: '#000', background: '#f00', padding: '2px', marginTop: '5px', borderRadius: '2px' }}>LOW CONVICTION</div>}
                             </div>
                         ))}
                     </div>
-                    {/* Add keyframes globally for scanning bar */}
-                    <style>{`
-                        @keyframes scan {
-                            0% { transform: translateY(-100%); opacity: 0; }
-                            50% { opacity: 1; }
-                            100% { transform: translateY(1000%); opacity: 0; }
-                        }
-                    `}</style>
                 </div>
 
                 {/* 7. Forecast Chart (SVG) */}