diff --git a/web/src/components/Skeleton.tsx b/web/src/components/Skeleton.tsx
new file mode 100644
index 0000000..1e38a04
--- /dev/null
+++ b/web/src/components/Skeleton.tsx
@@ -0,0 +1,33 @@
+import type { CSSProperties } from 'react';
+
+interface SkeletonBlockProps {
+  width?: number | string;
+  height?: number | string;
+  radius?: number;
+  style?: CSSProperties;
+}
+
+export function SkeletonBlock({
+  width = '100%',
+  height = 12,
+  radius = 999,
+  style,
+}: SkeletonBlockProps) {
+  return (
+    <span
+      aria-hidden="true"
+      style={{
+        display: 'block',
+        width,
+        height,
+        borderRadius: radius,
+        background: 'linear-gradient(90deg, #F3F4F6 0%, #E5E7EB 45%, #F3F4F6 100%)',
+        ...style,
+      }}
+    />
+  );
+}
+
+export function SkeletonText({ width = '70%' }: { width?: number | string }) {
+  return <SkeletonBlock width={width} height={10} />;
+}
diff --git a/web/src/components/layout/RightPanel.tsx b/web/src/components/layout/RightPanel.tsx
index cb838d8..bfbb187 100644
--- a/web/src/components/layout/RightPanel.tsx
+++ b/web/src/components/layout/RightPanel.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { ArrowRight } from 'lucide-react';
 import { useAppContext } from '../../context/AppContext';
 import { fetchNews, type NewsArticle as MarketNewsArticle } from '../../lib/marketApi';
+import { SkeletonBlock, SkeletonText } from '../Skeleton';
 
 // ─── Portfolio Summary ────────────────────────────────────────────────────────
 
@@ -147,6 +148,31 @@ function NewsCard({ article }: { article: NewsArticle }) {
   );
 }
 
+function NewsFeedSkeleton() {
+  return (
+    <div role="status" aria-label="Loading news" style={{ padding: '4px 0 8px' }}>
+      {[0, 1, 2].map((i) => (
+        <div
+          key={i}
+          style={{
+            display: 'flex',
+            gap: 10,
+            padding: '10px 16px',
+            borderBottom: i < 2 ? '1px solid #F9FAFB' : 'none',
+          }}
+        >
+          <SkeletonBlock width={48} height={48} radius={10} style={{ flexShrink: 0 }} />
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 7, paddingTop: 3 }}>
+            <SkeletonText width="92%" />
+            <SkeletonText width="68%" />
+            <SkeletonText width="36%" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function NewsFeed() {
   const { activeSymbol } = useAppContext();
   const [news, setNews]       = useState<NewsArticle[]>([]);
@@ -180,9 +206,7 @@ function NewsFeed() {
         </span>
       </div>
 
-      {loading && (
-        <div style={{ fontSize: 12, color: '#9CA3AF', padding: '12px 16px' }}>Loading news…</div>
-      )}
+      {loading && <NewsFeedSkeleton />}
 
       {!loading && error && (
         <div style={{ fontSize: 12, color: '#DC2626', padding: '12px 16px' }}>{error}</div>
@@ -194,7 +218,7 @@ function NewsFeed() {
         </div>
       )}
 
-      {news.map((a, i) => <NewsCard key={a.id ?? a.url ?? i} article={a} />)}
+      {!loading && news.map((a, i) => <NewsCard key={a.id ?? a.url ?? i} article={a} />)}
     </div>
   );
 }
diff --git a/web/src/views/HomeView.tsx b/web/src/views/HomeView.tsx
index 4f063b5..a750d7a 100644
--- a/web/src/views/HomeView.tsx
+++ b/web/src/views/HomeView.tsx
@@ -10,6 +10,7 @@ import {
   fetchChartBars, fetchResearchProfile, fetchResearchMetrics, fetchResearchEarnings,
   type OHLCVBar,
 } from '../lib/marketApi';
+import { SkeletonBlock, SkeletonText } from '../components/Skeleton';
 
 // ─── Time period config ───────────────────────────────────────────────────────
 const PERIODS = ['1D', '5D', '1M', '3M', '6M', 'YTD', '1Y', '5Y', 'MAX'] as const;
@@ -589,6 +590,7 @@ function ResearchCards({
 
   const nextEarnings = earnings.find(e => e.date && new Date(e.date) >= new Date());
   const fmtDate = (d?: string) => d ? new Date(d).toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' }) : '—';
+  const ValueSkeleton = ({ width = 58 }: { width?: number }) => <SkeletonBlock width={width} height={10} />;
 
   const financialRows: [string, string][] = [
     ['Market Cap',       fmtBig(profile?.mktCap)],
@@ -610,7 +612,12 @@ function ResearchCards({
           📋 Company
         </div>
         {profileLoading ? (
-          <div style={{ color: '#9CA3AF', fontSize: 12 }}>Loading…</div>
+          <div role="status" aria-label="Loading company profile" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <SkeletonText width="70%" />
+            <SkeletonText width="96%" />
+            <SkeletonText width="88%" />
+            <SkeletonText width="55%" />
+          </div>
         ) : profile ? (
           <>
             <div style={{ fontSize: 12, color: '#374151', marginBottom: 6, lineHeight: 1.5 }}>
@@ -646,7 +653,9 @@ function ResearchCards({
             padding: '5px 0', borderBottom: '1px solid #F9FAFB',
           }}>
             <span style={{ fontSize: 12, color: '#6B7280' }}>{label}</span>
-            <span style={{ fontSize: 12, fontWeight: 600, color: '#111827' }}>{loading || profileLoading ? '…' : val}</span>
+            <span style={{ fontSize: 12, fontWeight: 600, color: '#111827' }}>
+              {loading || profileLoading ? <ValueSkeleton width={label.length > 10 ? 64 : 46} /> : val}
+            </span>
           </div>
         ))}
       </div>
@@ -667,10 +676,12 @@ function ResearchCards({
             padding: '5px 0', borderBottom: '1px solid #F9FAFB',
           }}>
             <span style={{ fontSize: 12, color: '#6B7280' }}>{label}</span>
-            <span style={{ fontSize: 12, fontWeight: 600, color: '#111827' }}>{val}</span>
+            <span style={{ fontSize: 12, fontWeight: 600, color: '#111827' }}>
+              {val === '…' ? <ValueSkeleton width={label === 'Next Earnings' ? 82 : 52} /> : val}
+            </span>
           </div>
         ))}
-        {earnings.length > 0 && (
+        {!loading && earnings.length > 0 && (
           <div style={{ marginTop: 10 }}>
             <div style={{ fontSize: 11, fontWeight: 600, color: '#374151', marginBottom: 4 }}>Past Earnings</div>
             {earnings.slice(0,3).map((e, i) => (
diff --git a/web/src/views/ScreenerView.tsx b/web/src/views/ScreenerView.tsx
index ff70aaf..a176f5b 100644
--- a/web/src/views/ScreenerView.tsx
+++ b/web/src/views/ScreenerView.tsx
@@ -1,10 +1,11 @@
 import { useState, useEffect, useCallback } from 'react';
-import { SlidersHorizontal, Search, Loader2, RefreshCw } from 'lucide-react';
+import { SlidersHorizontal, Search, RefreshCw } from 'lucide-react';
 import { useAppContext } from '../context/AppContext';
 import { useNavigate } from 'react-router-dom';
 import { getPlatformAccessToken } from '../lib/authSession';
 import { tradingRuntime } from '../lib/runtime';
 import { createRequestId } from '../../../shared/request-id.js';
+import { SkeletonBlock } from '../components/Skeleton';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 interface ScreenerRow {
@@ -126,6 +127,32 @@ export function ScreenerView() {
     </span>
   );
 
+  const ScreenerSkeletonRows = () => (
+    <div role="status" aria-label="Loading screener results">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <div
+          key={i}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: '100px 1fr 90px 90px 110px 80px 110px',
+            padding: '12px 16px',
+            borderBottom: i < 5 ? '1px solid #F9FAFB' : 'none',
+            alignItems: 'center',
+            columnGap: 0,
+          }}
+        >
+          <SkeletonBlock width={54} height={13} />
+          <SkeletonBlock width={`${72 - (i % 3) * 8}%`} height={12} />
+          <SkeletonBlock width={58} height={12} />
+          <SkeletonBlock width={50} height={12} />
+          <SkeletonBlock width={74} height={12} />
+          <SkeletonBlock width={38} height={12} />
+          <SkeletonBlock width={68} height={12} />
+        </div>
+      ))}
+    </div>
+  );
+
   const handleRowClick = (symbol: string) => {
     setActiveSymbol(symbol);
     navigate('/');
@@ -271,15 +298,7 @@ export function ScreenerView() {
         </div>
 
         {/* Loading */}
-        {loading && (
-          <div style={{
-            padding: 40, display: 'flex', flexDirection: 'column',
-            alignItems: 'center', gap: 10, color: '#9CA3AF',
-          }}>
-            <Loader2 size={28} color="#93C5FD" style={{ animation: 'spin 1s linear infinite' }} />
-            <span style={{ fontSize: 13 }}>Fetching screener results…</span>
-          </div>
-        )}
+        {loading && <ScreenerSkeletonRows />}
 
         {/* Rows */}
         {!loading && filtered.map((row, i) => (