diff --git a/src/pages/UsageEventsView.tsx b/src/pages/UsageEventsView.tsx
index 60a7dbc..a03a4e1 100644
--- a/src/pages/UsageEventsView.tsx
+++ b/src/pages/UsageEventsView.tsx
@@ -487,6 +487,7 @@ export function EventsView({
 }) {
   const { t } = useI18n();
   const [widths, setWidths] = useState<Record<EventColumnKey, number>>(getInitialColumnWidths);
+  const widthsRef = useRef(widths);
   const [visibleColumnKeys, setVisibleColumnKeys] = useState<EventColumnKey[]>(getInitialVisibleColumns);
   const [columnSettingsOpen, setColumnSettingsOpen] = useState(false);
   const [draftVisibleColumnKeys, setDraftVisibleColumnKeys] = useState<EventColumnKey[]>(visibleColumnKeys);
@@ -508,12 +509,17 @@ export function EventsView({
   const isCustomized = EVENT_COLUMNS.some((col) => widths[col.key] !== col.defaultWidth);
   const noRemarkLabel = t('usage.key.noRemark');
 
+  const commitWidths = (next: Record<EventColumnKey, number>) => {
+    widthsRef.current = next;
+    setWidths(next);
+  };
+
   const resetAllWidths = () => {
     const defaults: Record<EventColumnKey, number> = {} as any;
     for (const col of EVENT_COLUMNS) {
       defaults[col.key] = col.defaultWidth;
     }
-    setWidths(defaults);
+    commitWidths(defaults);
     try {
       localStorage.setItem(EVENT_COL_WIDTHS_STORAGE_KEY, JSON.stringify(defaults));
     } catch {}
@@ -554,23 +560,19 @@ export function EventsView({
     e.stopPropagation();
     const colDef = EVENT_COLUMNS.find((c) => c.key === key);
     if (!colDef) return;
-    setWidths((prev) => {
-      const next = { ...prev, [key]: colDef.defaultWidth };
-      try {
-        localStorage.setItem(EVENT_COL_WIDTHS_STORAGE_KEY, JSON.stringify(next));
-      } catch {}
-      return next;
-    });
+    const next = { ...widthsRef.current, [key]: colDef.defaultWidth };
+    commitWidths(next);
+    try {
+      localStorage.setItem(EVENT_COL_WIDTHS_STORAGE_KEY, JSON.stringify(next));
+    } catch {}
   };
 
   const persistColumnWidth = (key: EventColumnKey, width: number) => {
-    setWidths((current) => {
-      const next = { ...current, [key]: width };
-      try {
-        localStorage.setItem(EVENT_COL_WIDTHS_STORAGE_KEY, JSON.stringify(next));
-      } catch {}
-      return next;
-    });
+    const next = { ...widthsRef.current, [key]: width };
+    commitWidths(next);
+    try {
+      localStorage.setItem(EVENT_COL_WIDTHS_STORAGE_KEY, JSON.stringify(next));
+    } catch {}
   };
 
   const handleResizeKeyDown = (key: EventColumnKey, event: KeyboardEvent<HTMLDivElement>) => {
@@ -597,41 +599,60 @@ export function EventsView({
     resizeCleanupRef.current?.();
     const startX = e.clientX;
     const startWidth =
-      widths[key] ?? EVENT_COLUMNS.find((c) => c.key === key)?.defaultWidth ?? 100;
+      widthsRef.current[key] ?? EVENT_COLUMNS.find((c) => c.key === key)?.defaultWidth ?? 100;
     const colDef = EVENT_COLUMNS.find((c) => c.key === key);
     const minWidth = colDef?.minWidth ?? 50;
+    const table = e.currentTarget.closest('table');
+    const column = table?.querySelector<HTMLElement>(`col[data-column="${key}"]`) ?? null;
+    const header = e.currentTarget.closest('th');
 
     setResizingCol(key);
     document.body.classList.add('table-col-resizing');
 
     let currentWidth = startWidth;
+    let frame = 0;
+
+    const paintWidth = (nextWidth: number) => {
+      widthsRef.current = { ...widthsRef.current, [key]: nextWidth };
+      if (column) column.style.width = `${nextWidth}px`;
+      if (header) header.style.width = `${nextWidth}px`;
+      if (table) {
+        const total = visibleColumns.reduce(
+          (sum, item) => sum + (widthsRef.current[item.key] ?? item.defaultWidth),
+          0,
+        );
+        table.style.width = `${total}px`;
+      }
+    };
 
     const onPointerMove = (moveEvent: PointerEvent) => {
       const delta = moveEvent.clientX - startX;
-      const nextWidth = Math.min(800, Math.max(minWidth, Math.round(startWidth + delta)));
-      currentWidth = nextWidth;
-      setWidths((prev) => ({ ...prev, [key]: nextWidth }));
+      currentWidth = Math.min(800, Math.max(minWidth, Math.round(startWidth + delta)));
+      if (frame) return;
+      frame = window.requestAnimationFrame(() => {
+        frame = 0;
+        paintWidth(currentWidth);
+      });
     };
 
     const cleanup = () => {
       window.removeEventListener('pointermove', onPointerMove);
       window.removeEventListener('pointerup', onPointerUp);
       window.removeEventListener('pointercancel', onPointerUp);
+      if (frame) window.cancelAnimationFrame(frame);
       document.body.classList.remove('table-col-resizing');
       resizeCleanupRef.current = null;
     };
 
     const onPointerUp = () => {
+      paintWidth(currentWidth);
       cleanup();
       setResizingCol(null);
-
-      setWidths((prev) => {
-        const next = { ...prev, [key]: currentWidth };
-        try {
-          localStorage.setItem(EVENT_COL_WIDTHS_STORAGE_KEY, JSON.stringify(next));
-        } catch {}
-        return next;
-      });
+      const next = widthsRef.current;
+      setWidths(next);
+      try {
+        localStorage.setItem(EVENT_COL_WIDTHS_STORAGE_KEY, JSON.stringify(next));
+      } catch {}
     };
 
     window.addEventListener('pointermove', onPointerMove);
@@ -641,7 +662,7 @@ export function EventsView({
   };
 
   const totalTableWidth = visibleColumns.reduce(
-    (sum, col) => sum + (widths[col.key] ?? col.defaultWidth),
+    (sum, col) => sum + (widthsRef.current[col.key] ?? widths[col.key] ?? col.defaultWidth),
     0
   );
 
@@ -678,7 +699,7 @@ export function EventsView({
 
   return (
     <section className={`panel usage-events-panel usage-request-log${isCompactDefault ? ' usage-events-compact' : ''}`} aria-label={t('usage.events.title')} aria-busy={loading}>
-      {loading ? <div className="usage-empty" role="status"><Database size={20} aria-hidden="true" /><span>{t('usage.loading')}</span></div> : events.items.length ? (
+      {loading && events.items.length === 0 ? <div className="usage-empty" role="status"><Database size={20} aria-hidden="true" /><span>{t('usage.loading')}</span></div> : events.items.length ? (
         <div ref={tableWrapRef} className="usage-table-wrap" tabIndex={0} role="region" aria-label={t('usage.events.title')}>
           <table
             className="usage-events-table"
@@ -686,7 +707,7 @@ export function EventsView({
           >
             <colgroup>
               {visibleColumns.map((col) => (
-                <col key={col.key} style={{ width: `${widths[col.key]}px` }} />
+                <col key={col.key} data-column={col.key} style={{ width: `${widthsRef.current[col.key] ?? widths[col.key]}px` }} />
               ))}
             </colgroup>
             <thead>
@@ -697,7 +718,7 @@ export function EventsView({
                     <th
                       key={col.key}
                       className={`usage-th-${col.key} align-${col.align}`}
-                      style={{ width: `${widths[col.key]}px` }}
+                      style={{ width: `${widthsRef.current[col.key] ?? widths[col.key]}px` }}
                     >
                       <div className="usage-th-content" title={label}>
                         <span>{label}</span>
@@ -710,7 +731,7 @@ export function EventsView({
                         aria-orientation="vertical"
                         aria-valuemin={col.minWidth}
                         aria-valuemax={800}
-                        aria-valuenow={widths[col.key]}
+                        aria-valuenow={widthsRef.current[col.key] ?? widths[col.key]}
                         onPointerDown={(e) => handleResizeStart(col.key, e)}
                         onDoubleClick={(e) => resetSingleColumn(col.key, e)}
                         onKeyDown={(event) => handleResizeKeyDown(col.key, event)}
@@ -749,7 +770,7 @@ export function EventsView({
         <UsageEmpty />
       )}
 
-      {!loading && events.items.length > 0 ? <TableTopScrollbar tableWrapRef={tableWrapRef} /> : null}
+      {events.items.length > 0 ? <TableTopScrollbar tableWrapRef={tableWrapRef} /> : null}
 
       <div className="usage-events-footer">
         <span className="usage-pagination-summary">{t('usage.events.rangeSummary', { start: startRecordNum, end: endRecordNum, total: compactNumber(events.total) })}</span>
diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx
index d341ec0..32c3cef 100644
--- a/src/pages/UsageRecordsPage.tsx
+++ b/src/pages/UsageRecordsPage.tsx
@@ -270,6 +270,7 @@ export function UsageRecordsPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [loadedScopeKey, setLoadedScopeKey] = useState('');
+  const loadedFilterScopeKeyRef = useRef('');
   const requestIdRef = useRef(0);
   const schedulerRef = useRef<ReturnType<typeof createRefreshScheduler> | null>(null);
   if (!schedulerRef.current) schedulerRef.current = createRefreshScheduler(250);
@@ -311,6 +312,20 @@ export function UsageRecordsPage() {
     };
   }, [apiKeyHash, customEnd, customStart, model, provider, range, result, source]);
 
+  const filterScopeKey = useMemo(() => usageViewScopeKey({
+    tab: 'overview',
+    range,
+    customStart,
+    customEnd,
+    model: '',
+    provider: '',
+    source: '',
+    apiKeyHash: '',
+    result: 'all',
+    page: 1,
+    pageSize: 1,
+  }), [customEnd, customStart, range]);
+
   const scopeKey = useMemo(() => usageViewScopeKey({
     tab: activeTab,
     range,
@@ -344,7 +359,10 @@ export function UsageRecordsPage() {
       if (!quiet) setLoading(true);
       try {
         const statusRequest = invoke<CollectorStatus>('get_usage_collector_status');
-        const optionsRequest = invoke<UsageAnalysis>('get_usage_analysis', { query: timeQuery });
+        const filtersChanged = loadedFilterScopeKeyRef.current !== filterScopeKey;
+        const optionsRequest = filtersChanged
+          ? invoke<UsageAnalysis>('get_usage_analysis', { query: timeQuery })
+          : Promise.resolve(null);
         if (activeTab === 'overview') {
           const [nextStatus, nextOptions, nextOverview] = await Promise.all([
             statusRequest,
@@ -353,7 +371,7 @@ export function UsageRecordsPage() {
           ]);
           if (requestId !== requestIdRef.current) return;
           setStatus(nextStatus);
-          setOptionsAnalysis(nextOptions);
+          if (nextOptions) setOptionsAnalysis(nextOptions);
           setOverview(nextOverview);
           setOverviewRange(timeQuery);
         } else if (activeTab === 'analysis') {
@@ -361,13 +379,13 @@ export function UsageRecordsPage() {
             statusRequest,
             optionsRequest,
             invoke<UsageOverview>('get_usage_overview', { query }),
-            model || provider || source || apiKeyHash || result !== 'all'
+            model || provider || source || apiKeyHash || result !== 'all' || !filtersChanged
               ? invoke<UsageAnalysis>('get_usage_analysis', { query })
-              : optionsRequest,
+              : optionsRequest.then((analysis) => analysis ?? emptyAnalysis),
           ]);
           if (requestId !== requestIdRef.current) return;
           setStatus(nextStatus);
-          setOptionsAnalysis(nextOptions);
+          if (nextOptions) setOptionsAnalysis(nextOptions);
           setOverview(nextOverview);
           setOverviewRange(timeQuery);
           setAnalysis(nextAnalysis);
@@ -381,7 +399,7 @@ export function UsageRecordsPage() {
           ]);
           if (requestId !== requestIdRef.current) return;
           setStatus(nextStatus);
-          setOptionsAnalysis(nextOptions);
+          if (nextOptions) setOptionsAnalysis(nextOptions);
           setEvents(nextEvents);
         } else if (activeTab === 'pricing') {
           const [nextStatus, nextOptions, nextPricing] = await Promise.all([
@@ -391,15 +409,16 @@ export function UsageRecordsPage() {
           ]);
           if (requestId !== requestIdRef.current) return;
           setStatus(nextStatus);
-          setOptionsAnalysis(nextOptions);
+          if (nextOptions) setOptionsAnalysis(nextOptions);
           setPricing(nextPricing);
         } else {
           const [nextStatus, nextOptions] = await Promise.all([statusRequest, optionsRequest]);
           if (requestId !== requestIdRef.current) return;
           setStatus(nextStatus);
-          setOptionsAnalysis(nextOptions);
+          if (nextOptions) setOptionsAnalysis(nextOptions);
         }
         setLoadedScopeKey(scopeKey);
+        if (filtersChanged) loadedFilterScopeKeyRef.current = filterScopeKey;
         setError('');
       } catch (requestError) {
         if (requestId === requestIdRef.current) setError(String(requestError));
@@ -407,7 +426,7 @@ export function UsageRecordsPage() {
         if (requestId === requestIdRef.current) setLoading(false);
       }
     },
-    [activeTab, buildQueries, page, pageSize, model, provider, source, apiKeyHash, result, scopeKey]
+    [activeTab, buildQueries, filterScopeKey, page, pageSize, model, provider, source, apiKeyHash, result, scopeKey]
   );
 
   const loadData = useCallback(
@@ -720,8 +739,8 @@ export function UsageRecordsPage() {
       {hasCurrentSnapshot && activeTab === 'analysis' ? <UsageAnalysisView analysis={analysis} overview={overview} range={overviewRange} /> : null}
       {activeTab === 'events' ? (
         <EventsView
-          events={hasCurrentSnapshot && events ? events : { items: [], total: 0, page, pageSize, totalPages: 1 }}
-          loading={showInitialLoading}
+          events={events ?? { items: [], total: 0, page, pageSize, totalPages: 1 }}
+          loading={!events || (loading && !hasCurrentSnapshot)}
           pageSize={pageSize}
           query={buildQueries().query}
           onPage={setPage}
diff --git a/src/styles/usage-subpages.css b/src/styles/usage-subpages.css
index da4e6fc..110a99f 100644
--- a/src/styles/usage-subpages.css
+++ b/src/styles/usage-subpages.css
@@ -203,7 +203,11 @@
   border: 0;
   background: var(--usage-log-surface);
   color: var(--usage-log-text);
-  box-shadow: 0 1px 2px rgb(16 24 40 / 4%);
+  box-shadow: inset 0 -1px 0 var(--usage-log-line);
+}
+
+body.table-col-resizing .usage-records-page .usage-request-log .usage-events-table tbody tr {
+  pointer-events: none;
 }
 
 .usage-records-page .usage-request-log .usage-events-table tbody td:first-child {
@@ -216,7 +220,6 @@
 
 .usage-records-page .usage-request-log .usage-events-table tbody tr:hover td {
   background: var(--usage-log-hover) !important;
-  box-shadow: 0 8px 22px rgb(16 24 40 / 7%);
 }
 
 .usage-records-page .usage-request-log .usage-th-total,