From cf4d622f0b610e834b116a78d27c490356d86d16 Mon Sep 17 00:00:00 2001
From: susanyusuf <susanyusuf1@gmail.com>
Date: Sat, 25 Jul 2026 10:07:34 +0100
Subject: [PATCH 1/2] feat: add loading skeletons for notification lists (#388)

---
 dashboard/src/App.tsx                         | 165 +++---------------
 .../src/components/EventExplorerCard.tsx      |  24 +--
 .../src/components/EventExplorerTable.tsx     |  11 +-
 .../src/components/EventsListSkeleton.tsx     |  32 ++++
 .../components/NotificationHealthPanel.tsx    |   3 +-
 .../src/components/NotificationSearchBar.tsx  |   4 +-
 .../components/NotificationSearchSkeleton.tsx |  50 ++++++
 dashboard/src/index.css                       |  56 ++++++
 dashboard/src/pages/EventExplorerPage.tsx     |   7 +-
 dashboard/src/pages/EventsPage.test.tsx       |  80 +++++++++
 dashboard/src/pages/EventsPage.tsx            |  10 +-
 .../src/pages/NotificationSearchPage.test.tsx | 100 +++++++++++
 .../src/pages/NotificationSearchPage.tsx      |  14 +-
 dashboard/src/pages/TemplatesPage.tsx         |  17 +-
 dashboard/src/services/timelineApi.ts         |   7 -
 dashboard/src/store/eventStore.test.tsx       |   4 +-
 dashboard/src/store/eventStore.ts             |  10 +-
 .../src/store/notificationStatusSync.test.tsx |   2 +-
 dashboard/src/types/event.ts                  |   5 +-
 dashboard/src/utils/eventData.ts              |   2 +-
 20 files changed, 402 insertions(+), 201 deletions(-)
 create mode 100644 dashboard/src/components/EventsListSkeleton.tsx
 create mode 100644 dashboard/src/components/NotificationSearchSkeleton.tsx
 create mode 100644 dashboard/src/pages/EventsPage.test.tsx
 create mode 100644 dashboard/src/pages/NotificationSearchPage.test.tsx

diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx
index f4944682..f81f24c4 100644
--- a/dashboard/src/App.tsx
+++ b/dashboard/src/App.tsx
@@ -1,141 +1,20 @@
-import { useEffect, useMemo, useState } from 'react';
-import { EventExplorerPage } from './pages/EventExplorerPage';
-import { NotificationPreferencesPage } from './pages/NotificationPreferencesPage';
-
-const VALID_TAB_KEYS = ['explorer', 'preferences'] as const;
-
-type TabKey = (typeof VALID_TAB_KEYS)[number];
-
-function parseActiveTab(search: string): TabKey {
-  const params = new URLSearchParams(search);
-  const tab = params.get('tab');
-  return VALID_TAB_KEYS.includes(tab as TabKey) ? (tab as TabKey) : 'explorer';
-}
-
-export function App() {
-  const initialSearch = typeof window !== 'undefined' ? window.location.search : '';
-  const [activeTab, setActiveTab] = useState<TabKey>(() => parseActiveTab(initialSearch));
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const handlePopState = () => {
-      setActiveTab(parseActiveTab(window.location.search));
-    };
-
-    window.addEventListener('popstate', handlePopState);
-    return () => window.removeEventListener('popstate', handlePopState);
-  }, []);
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const params = new URLSearchParams(window.location.search);
-    params.set('tab', activeTab);
-    window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
-  }, [activeTab]);
-
-  const tabLabel = useMemo(
-    () => (activeTab === 'preferences' ? 'Notification Preferences' : 'Event Explorer'),
-    [activeTab]
-  );
-
-  return (
-    <div className="app">
-      <header className="app__topbar">
-        <div className="app__brand">
-          <p className="app__brand-eyebrow">Notify Chain</p>
-          <h1>{tabLabel}</h1>
-        </div>
-
-        <nav className="app__nav" aria-label="Dashboard tabs">
-          <button
-            type="button"
-            className={`app__tab ${activeTab === 'explorer' ? 'app__tab--active' : ''}`}
 import { useState } from 'react';
 import { EventExplorerPage } from './pages/EventExplorerPage';
-import { ExportHistoryPage } from './pages/ExportHistoryPage';
-
-export function App() {
-  const [activeTab, setActiveTab] = useState<'explorer' | 'exports'>('explorer');
-
-  return (
-    <div className="app">
-      <nav className="nav-header">
-        <span className="nav-brand">Notify-Chain</span>
-        <div className="nav-tabs">
-          <button
-            type="button"
-            className={`nav-tab-btn ${activeTab === 'explorer' ? 'nav-tab-btn--active' : ''}`}
-            onClick={() => setActiveTab('explorer')}
-          >
-            Event Explorer
-          </button>
-          <button
-            type="button"
-            className={`app__tab ${activeTab === 'preferences' ? 'app__tab--active' : ''}`}
-            onClick={() => setActiveTab('preferences')}
-          >
-            Notification Preferences
-          </button>
-        </nav>
-      </header>
-
-      {activeTab === 'preferences' ? <NotificationPreferencesPage /> : <EventExplorerPage />}
-            className={`nav-tab-btn ${activeTab === 'exports' ? 'nav-tab-btn--active' : ''}`}
-            onClick={() => setActiveTab('exports')}
-          >
-            Export Center
-          </button>
-        </div>
-      </nav>
-
-      {activeTab === 'explorer' ? <EventExplorerPage /> : <ExportHistoryPage />}
-import { DeliveryHeatmap } from './components/DeliveryHeatmap';
-import { ThemeToggle } from './components/ThemeToggle';
-import { useTheme } from './hooks/useTheme';
-import { useEventStore } from './store/eventStore';
-
-export function App() {
-  const { theme, toggleTheme } = useTheme();
-  const events = useEventStore((state) => state.events);
-
-  return (
-    <div className="app">
-      <div className="app__theme-bar">
-        <ThemeToggle theme={theme} onToggle={toggleTheme} />
-      </div>
-      <EventExplorerPage />
-      <DeliveryHeatmap events={events} />
-import { TemplatePreviewDemoPage } from './pages/TemplatePreviewDemoPage';
-
-type Page = 'events' | 'templates';
-
-export function App() {
-  const [currentPage, setCurrentPage] = useState<Page>('templates');
-
-  return (
-    <div className="app">
-      <nav className="app-nav">
-        <button
-          className={`app-nav__button ${currentPage === 'events' ? 'app-nav__button--active' : ''}`}
-          onClick={() => setCurrentPage('events')}
-          type="button"
 import { NotificationTimelineView } from './components/NotificationTimelineView';
-import { TemplatesPage } from './pages/TemplatesPage';
-
-type Tab = 'explorer' | 'timeline' | 'templates';
 import { ActivityFeed } from './components/ActivityFeed';
 import { WebhookDashboardPage } from './pages/WebhookDashboardPage';
 import { ExportHistoryPage } from './pages/ExportHistoryPage';
 import { NotificationSearchPage } from './pages/NotificationSearchPage';
+import { NotificationPreferencesPage } from './pages/NotificationPreferencesPage';
 
-type Tab = 'explorer' | 'timeline' | 'activity' | 'export-history' | 'search';
-type Tab = 'explorer' | 'timeline' | 'activity' | 'webhooks' | 'export-history';
+type Tab =
+  | 'explorer'
+  | 'timeline'
+  | 'activity'
+  | 'webhooks'
+  | 'export-history'
+  | 'search'
+  | 'preferences';
 
 export function App() {
   const [tab, setTab] = useState<Tab>('explorer');
@@ -144,6 +23,7 @@ export function App() {
     <div className="app">
       <nav className="app-tabs" role="tablist" aria-label="Main navigation">
         <button
+          type="button"
           role="tab"
           aria-selected={tab === 'explorer'}
           className={`app-tabs__btn${tab === 'explorer' ? ' app-tabs__btn--active' : ''}`}
@@ -152,18 +32,7 @@ export function App() {
           Event Explorer
         </button>
         <button
-          className={`app-nav__button ${currentPage === 'templates' ? 'app-nav__button--active' : ''}`}
-          onClick={() => setCurrentPage('templates')}
           type="button"
-        >
-          Template Preview
-        </button>
-      </nav>
-      
-      <main className="app-content">
-        {currentPage === 'events' && <EventExplorerPage />}
-        {currentPage === 'templates' && <TemplatePreviewDemoPage />}
-      </main>
           role="tab"
           aria-selected={tab === 'timeline'}
           className={`app-tabs__btn${tab === 'timeline' ? ' app-tabs__btn--active' : ''}`}
@@ -172,6 +41,7 @@ export function App() {
           Delivery Timeline
         </button>
         <button
+          type="button"
           role="tab"
           aria-selected={tab === 'activity'}
           className={`app-tabs__btn${tab === 'activity' ? ' app-tabs__btn--active' : ''}`}
@@ -180,6 +50,7 @@ export function App() {
           Activity Feed
         </button>
         <button
+          type="button"
           role="tab"
           aria-selected={tab === 'webhooks'}
           className={`app-tabs__btn${tab === 'webhooks' ? ' app-tabs__btn--active' : ''}`}
@@ -188,6 +59,7 @@ export function App() {
           Webhook Performance
         </button>
         <button
+          type="button"
           role="tab"
           aria-selected={tab === 'export-history'}
           className={`app-tabs__btn${tab === 'export-history' ? ' app-tabs__btn--active' : ''}`}
@@ -196,6 +68,7 @@ export function App() {
           Export History
         </button>
         <button
+          type="button"
           role="tab"
           aria-selected={tab === 'search'}
           className={`app-tabs__btn${tab === 'search' ? ' app-tabs__btn--active' : ''}`}
@@ -203,6 +76,15 @@ export function App() {
         >
           Notification Search
         </button>
+        <button
+          type="button"
+          role="tab"
+          aria-selected={tab === 'preferences'}
+          className={`app-tabs__btn${tab === 'preferences' ? ' app-tabs__btn--active' : ''}`}
+          onClick={() => setTab('preferences')}
+        >
+          Preferences
+        </button>
       </nav>
 
       {tab === 'explorer' && <EventExplorerPage />}
@@ -211,6 +93,7 @@ export function App() {
       {tab === 'webhooks' && <WebhookDashboardPage />}
       {tab === 'export-history' && <ExportHistoryPage />}
       {tab === 'search' && <NotificationSearchPage />}
+      {tab === 'preferences' && <NotificationPreferencesPage />}
     </div>
   );
 }
diff --git a/dashboard/src/components/EventExplorerCard.tsx b/dashboard/src/components/EventExplorerCard.tsx
index cd905f68..c837c726 100644
--- a/dashboard/src/components/EventExplorerCard.tsx
+++ b/dashboard/src/components/EventExplorerCard.tsx
@@ -35,17 +35,15 @@ interface EventExplorerCardProps {
   onCopyContract: (contractAddress: string) => void;
   isCopied: boolean;
   onSelect?: (event: BlockchainEvent) => void;
-}
-
-export function EventExplorerCard({ event, onCopyContract, isCopied, onSelect }: EventExplorerCardProps) {
-  contractStatuses: ContractStatus[];
+  contractStatuses?: ContractStatus[];
 }
 
 export function EventExplorerCard({
   event,
   onCopyContract,
   isCopied,
-  contractStatuses,
+  onSelect,
+  contractStatuses = [],
 }: EventExplorerCardProps) {
   const contractStatus = contractStatuses.find((c) => c.address === event.contractAddress);
   const isPaused = contractStatus?.paused ?? false;
@@ -77,22 +75,14 @@ export function EventExplorerCard({
           <p className="event-explorer__contract" title={event.contractAddress}>
             {shortenAddress(event.contractAddress)}
           </p>
-          <button
-            type="button"
-            className="event-explorer__copy-button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onCopyContract(event.contractAddress);
-            }}
-            aria-label={`Copy contract address ${event.contractAddress}`}
-          >
-            {isCopied ? 'Copied' : 'Copy'}
-          </button>
           <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
             <button
               type="button"
               className="event-explorer__copy-button"
-              onClick={() => onCopyContract(event.contractAddress)}
+              onClick={(e) => {
+                e.stopPropagation();
+                onCopyContract(event.contractAddress);
+              }}
               aria-label={`Copy contract address ${event.contractAddress}`}
             >
               {isCopied ? 'Copied' : 'Copy'}
diff --git a/dashboard/src/components/EventExplorerTable.tsx b/dashboard/src/components/EventExplorerTable.tsx
index f4081a49..82b34737 100644
--- a/dashboard/src/components/EventExplorerTable.tsx
+++ b/dashboard/src/components/EventExplorerTable.tsx
@@ -6,13 +6,14 @@ import { EventExplorerCard } from './EventExplorerCard';
 interface EventExplorerTableProps {
   events: BlockchainEvent[];
   onSelectEvent?: (event: BlockchainEvent) => void;
+  contractStatuses?: ContractStatus[];
 }
 
-export function EventExplorerTable({ events, onSelectEvent }: EventExplorerTableProps) {
-  contractStatuses: ContractStatus[];
-}
-
-export function EventExplorerTable({ events, contractStatuses }: EventExplorerTableProps) {
+export function EventExplorerTable({
+  events,
+  onSelectEvent,
+  contractStatuses = [],
+}: EventExplorerTableProps) {
   const [copiedAddress, setCopiedAddress] = useState<string | null>(null);
 
   async function syncCopyText(text: string) {
diff --git a/dashboard/src/components/EventsListSkeleton.tsx b/dashboard/src/components/EventsListSkeleton.tsx
new file mode 100644
index 00000000..7b10a874
--- /dev/null
+++ b/dashboard/src/components/EventsListSkeleton.tsx
@@ -0,0 +1,32 @@
+interface EventsListSkeletonProps {
+  rows?: number;
+}
+
+function SkeletonLine({ width }: { width: string }) {
+  return <span className="skeleton-block skeleton-block--inline" style={{ width }} aria-hidden="true" />;
+}
+
+export function EventsListSkeleton({ rows = 8 }: EventsListSkeletonProps) {
+  return (
+    <div className="event-panel event-panel--skeleton" aria-busy="true" aria-label="Loading events">
+      <div className="event-list" role="status">
+        {Array.from({ length: rows }).map((_, index) => (
+          <article key={index} className="event-row event-row--skeleton">
+            <div className="event-row__primary">
+              <SkeletonLine width="140px" />
+              <SkeletonLine width="90px" />
+            </div>
+            <div className="event-row__meta">
+              <SkeletonLine width="120px" />
+              <SkeletonLine width="160px" />
+            </div>
+            <div className="event-row__details">
+              <SkeletonLine width="80px" />
+              <SkeletonLine width="110px" />
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/dashboard/src/components/NotificationHealthPanel.tsx b/dashboard/src/components/NotificationHealthPanel.tsx
index b726ebf2..25ffc9ac 100644
--- a/dashboard/src/components/NotificationHealthPanel.tsx
+++ b/dashboard/src/components/NotificationHealthPanel.tsx
@@ -120,7 +120,8 @@ export function NotificationHealthPanel(props: { healthUrl: string; pollInterval
 
       setLastUpdated(Date.now());
     } catch (err) {
-      if ((err as any)?.name === 'AbortError') return;
+      if (err instanceof DOMException && err.name === 'AbortError') return;
+      if (err instanceof Error && err.name === 'AbortError') return;
       setError(err instanceof Error ? err.message : String(err));
     } finally {
       setIsRefreshing(false);
diff --git a/dashboard/src/components/NotificationSearchBar.tsx b/dashboard/src/components/NotificationSearchBar.tsx
index 67e57305..f27acd25 100644
--- a/dashboard/src/components/NotificationSearchBar.tsx
+++ b/dashboard/src/components/NotificationSearchBar.tsx
@@ -2,9 +2,9 @@ import { useState, useEffect, memo } from 'react';
 import { useEventStore } from '../store/eventStore';
 import { useEventFilters } from '../hooks/useEventSelectors';
 import { useDebounce } from '../hooks/useDebounce';
-import type { NotificationStatus } from '../types/event';
+import type { NotificationReadFilter } from '../types/event';
 
-const STATUS_OPTIONS: { value: NotificationStatus; label: string }[] = [
+const STATUS_OPTIONS: { value: NotificationReadFilter; label: string }[] = [
   { value: 'all', label: 'All' },
   { value: 'unread', label: 'Unread' },
   { value: 'read', label: 'Read' },
diff --git a/dashboard/src/components/NotificationSearchSkeleton.tsx b/dashboard/src/components/NotificationSearchSkeleton.tsx
new file mode 100644
index 00000000..0531babf
--- /dev/null
+++ b/dashboard/src/components/NotificationSearchSkeleton.tsx
@@ -0,0 +1,50 @@
+interface NotificationSearchSkeletonProps {
+  cards?: number;
+}
+
+function SkeletonLine({ width, height = '12px' }: { width: string; height?: string }) {
+  return (
+    <span
+      className="skeleton-block skeleton-block--inline"
+      style={{ width, height }}
+      aria-hidden="true"
+    />
+  );
+}
+
+function NotificationResultCardSkeleton() {
+  return (
+    <article className="notif-result-card notif-result-card--skeleton" aria-hidden="true">
+      <div className="notif-result-card__header">
+        <SkeletonLine width="72px" height="20px" />
+        <SkeletonLine width="88px" height="20px" />
+        <SkeletonLine width="64px" height="20px" />
+      </div>
+      <div className="notif-result-card__fields notif-result-card__fields--skeleton">
+        <SkeletonLine width="70px" />
+        <SkeletonLine width="55%" />
+        <SkeletonLine width="60px" />
+        <SkeletonLine width="70%" />
+        <SkeletonLine width="70px" />
+        <SkeletonLine width="45%" />
+        <SkeletonLine width="55px" />
+        <SkeletonLine width="40%" />
+      </div>
+    </article>
+  );
+}
+
+export function NotificationSearchSkeleton({ cards = 4 }: NotificationSearchSkeletonProps) {
+  return (
+    <div
+      className="notif-search-results notif-search-results--skeleton"
+      aria-busy="true"
+      aria-label="Searching notifications"
+      role="status"
+    >
+      {Array.from({ length: cards }).map((_, index) => (
+        <NotificationResultCardSkeleton key={index} />
+      ))}
+    </div>
+  );
+}
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
index b4fad848..4290c05b 100644
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -753,6 +753,34 @@ body {
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
+.event-row--skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 88px;
+  justify-content: center;
+}
+
+.event-row--skeleton .event-row__primary,
+.event-row--skeleton .event-row__meta,
+.event-row--skeleton .event-row__details {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+}
+
+.event-panel--skeleton .event-list {
+  overflow: hidden;
+}
+
+.skeleton-block--inline {
+  display: inline-block;
+  height: 12px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
 .event-row__primary {
   display: flex;
   justify-content: space-between;
@@ -4784,6 +4812,34 @@ body {
   padding: 14px 16px;
 }
 
+.notif-result-card--skeleton {
+  pointer-events: none;
+}
+
+.notif-result-card__fields--skeleton {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 8px 16px;
+  align-items: center;
+}
+
+.templates-list__items--skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.templates-list__item--skeleton {
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.templates-list__item--skeleton .skeleton-block--row {
+  height: 96px;
+  width: 100%;
+}
+
 .notif-result-card__header {
   display: flex;
   gap: 8px;
diff --git a/dashboard/src/pages/EventExplorerPage.tsx b/dashboard/src/pages/EventExplorerPage.tsx
index ef1f324e..f656f10b 100644
--- a/dashboard/src/pages/EventExplorerPage.tsx
+++ b/dashboard/src/pages/EventExplorerPage.tsx
@@ -268,8 +268,11 @@ export function EventExplorerPage() {
       {isLoading ? (
         <EventExplorerSkeleton rows={Math.min(limit, 8)} />
       ) : currentPageEvents.length > 0 ? (
-        <EventExplorerTable events={currentPageEvents} onSelectEvent={handleSelectEvent} />
-        <EventExplorerTable events={currentPageEvents} contractStatuses={contractStatuses} />
+        <EventExplorerTable
+          events={currentPageEvents}
+          onSelectEvent={handleSelectEvent}
+          contractStatuses={contractStatuses}
+        />
       ) : (
         <section className="event-explorer__empty-state" role="status" aria-live="polite">
           <h2>No events found</h2>
diff --git a/dashboard/src/pages/EventsPage.test.tsx b/dashboard/src/pages/EventsPage.test.tsx
new file mode 100644
index 00000000..e33b9728
--- /dev/null
+++ b/dashboard/src/pages/EventsPage.test.tsx
@@ -0,0 +1,80 @@
+import '@testing-library/jest-dom';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import { EventsPage } from './EventsPage';
+import { useEventStore } from '../store/eventStore';
+import { generateMockEvents } from '../utils/eventData';
+import { fetchEvents } from '../services/eventsApi';
+
+jest.mock('../services/eventsApi', () => ({
+  fetchEvents: jest.fn(),
+}));
+
+jest.mock('../services/wallet', () => ({
+  restoreWalletSession: jest.fn(() => Promise.resolve()),
+}));
+
+jest.mock('../components/WalletConnectButton', () => ({
+  WalletConnectButton: () => <div data-testid="wallet-connect" />,
+}));
+
+const mockedFetchEvents = fetchEvents as jest.MockedFunction<typeof fetchEvents>;
+
+describe('EventsPage loading skeletons', () => {
+  beforeEach(() => {
+    useEventStore.setState({
+      events: [],
+      filters: {
+        search: '',
+        contractAddress: 'all',
+        eventType: 'all',
+        status: 'all',
+        dateFrom: '',
+        dateTo: '',
+      },
+      isLoading: false,
+      error: null,
+      lastFetchedAt: 0,
+    });
+    mockedFetchEvents.mockReset();
+  });
+
+  it('shows event list skeletons while loading and hides loading text', async () => {
+    mockedFetchEvents.mockReturnValue(new Promise(() => {}));
+
+    render(<EventsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/loading events/i)).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/loading events\.\.\./i)).not.toBeInTheDocument();
+    expect(screen.getByLabelText(/loading events/i)).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('replaces skeletons with event content once data is available', async () => {
+    const events = generateMockEvents(3);
+    let resolveFetch!: (value: typeof events) => void;
+    mockedFetchEvents.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveFetch = resolve;
+        })
+    );
+
+    render(<EventsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/loading events/i)).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      resolveFetch(events);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText(/loading events/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.getAllByRole('article').length).toBeGreaterThan(0);
+    expect(screen.queryByText(/no events match/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/dashboard/src/pages/EventsPage.tsx b/dashboard/src/pages/EventsPage.tsx
index 38488508..96eb890b 100644
--- a/dashboard/src/pages/EventsPage.tsx
+++ b/dashboard/src/pages/EventsPage.tsx
@@ -1,7 +1,9 @@
 import { useEffect } from 'react';
 import { EventFiltersBar } from '../components/EventFiltersBar';
 import { EventListPanel } from '../components/EventListPanel';
+import { EventsListSkeleton } from '../components/EventsListSkeleton';
 import { WalletConnectButton } from '../components/WalletConnectButton';
+import { getEventsApiBaseUrl } from '../config/eventsApiUrl';
 import { useEventLoadingState } from '../hooks/useEventSelectors';
 import { useEventStore } from '../store/eventStore';
 import { fetchEvents } from '../services/eventsApi';
@@ -9,8 +11,7 @@ import { generateMockEvents } from '../utils/eventData';
 import { restoreWalletSession } from '../services/wallet';
 
 const DEFAULT_EVENT_COUNT = 5000;
-const API_URL =
-  import.meta.env.VITE_EVENTS_API_URL ?? 'http://localhost:8787/api/events';
+const API_URL = `${getEventsApiBaseUrl()}/api/events`;
 const POLL_INTERVAL_MS = 15_000;
 
 export function EventsPage() {
@@ -91,14 +92,11 @@ export function EventsPage() {
 
       <EventFiltersBar />
 
-      <div aria-live="polite" role="status">
-        {isLoading && <p className="events-page__status">Loading events...</p>}
-      </div>
       <div aria-live="assertive" role="alert">
         {error && <p className="events-page__status events-page__status--warning">{error}</p>}
       </div>
 
-      <EventListPanel />
+      {isLoading ? <EventsListSkeleton /> : <EventListPanel />}
     </main>
   );
 }
\ No newline at end of file
diff --git a/dashboard/src/pages/NotificationSearchPage.test.tsx b/dashboard/src/pages/NotificationSearchPage.test.tsx
new file mode 100644
index 00000000..bfc57c36
--- /dev/null
+++ b/dashboard/src/pages/NotificationSearchPage.test.tsx
@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom';
+import { render, screen, waitFor, fireEvent, act } from '@testing-library/react';
+import { NotificationSearchPage } from './NotificationSearchPage';
+import { searchNotifications } from '../services/eventsApi';
+import type { NotificationSearchResponse } from '../services/eventsApi';
+
+jest.mock('../services/eventsApi', () => ({
+  searchNotifications: jest.fn(),
+}));
+
+const mockedSearch = searchNotifications as jest.MockedFunction<typeof searchNotifications>;
+
+const mockResult: NotificationSearchResponse = {
+  results: [
+    {
+      id: 1,
+      source: 'scheduled',
+      eventId: 'evt-abc',
+      txHash: '0xdeadbeef',
+      contractAddress: 'CABCDEF',
+      notificationType: 'email',
+      targetRecipient: 'user@example.com',
+      status: 'PENDING',
+      createdAt: '2026-01-15T12:00:00.000Z',
+      payload: null,
+    },
+  ],
+  total: 1,
+  limit: 20,
+  offset: 0,
+  itemCount: 1,
+  totalPages: 1,
+};
+
+describe('NotificationSearchPage loading skeletons', () => {
+  beforeEach(() => {
+    mockedSearch.mockReset();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('shows result-card skeletons while searching and hides Searching text', async () => {
+    mockedSearch.mockReturnValue(new Promise(() => {}));
+
+    render(<NotificationSearchPage />);
+
+    fireEvent.change(screen.getByLabelText(/free-text search/i), {
+      target: { value: 'payment' },
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(300);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/searching notifications/i)).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/searching…/i)).not.toBeInTheDocument();
+    expect(screen.getByLabelText(/searching notifications/i)).toHaveAttribute('aria-busy', 'true');
+  });
+
+  it('replaces skeletons with result cards once search completes', async () => {
+    let resolveSearch!: (value: NotificationSearchResponse) => void;
+    mockedSearch.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveSearch = resolve;
+        })
+    );
+
+    render(<NotificationSearchPage />);
+
+    fireEvent.change(screen.getByLabelText(/free-text search/i), {
+      target: { value: 'payment' },
+    });
+
+    await act(async () => {
+      jest.advanceTimersByTime(300);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByLabelText(/searching notifications/i)).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      resolveSearch(mockResult);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText(/searching notifications/i)).not.toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/1 result/i)).toBeInTheDocument();
+    expect(screen.getByText('evt-abc')).toBeInTheDocument();
+    expect(document.querySelector('.notif-result-card__status')).toHaveTextContent('PENDING');
+  });
+});
diff --git a/dashboard/src/pages/NotificationSearchPage.tsx b/dashboard/src/pages/NotificationSearchPage.tsx
index 28a59ab2..9aa24f1f 100644
--- a/dashboard/src/pages/NotificationSearchPage.tsx
+++ b/dashboard/src/pages/NotificationSearchPage.tsx
@@ -1,4 +1,6 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
+import { NotificationSearchSkeleton } from '../components/NotificationSearchSkeleton';
+import { getEventsApiBaseUrl } from '../config/eventsApiUrl';
 import { useDebounce } from '../hooks/useDebounce';
 import {
   searchNotifications,
@@ -7,10 +9,7 @@ import {
 } from '../services/eventsApi';
 
 const PAGE_SIZE = 20;
-const API_BASE = (import.meta.env.VITE_EVENTS_API_URL ?? 'http://localhost:8787/api/events').replace(
-  '/api/events',
-  ''
-);
+const API_BASE = getEventsApiBaseUrl();
 
 const STATUS_OPTIONS = ['', 'PENDING', 'PROCESSING', 'COMPLETED', 'FAILED', 'CANCELLED', 'PROCESSED'];
 
@@ -83,8 +82,7 @@ export function NotificationSearchPage() {
 
   useEffect(() => {
     runSearch();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filtersKey, page]);
+  }, [filtersKey, page, runSearch]);
 
   function clearAll() {
     setQuery('');
@@ -198,9 +196,7 @@ export function NotificationSearchPage() {
 
       {/* Results area */}
       <section aria-label="Search results" aria-live="polite">
-        {loading && (
-          <p className="notif-search-page__status">Searching…</p>
-        )}
+        {loading && <NotificationSearchSkeleton />}
 
         {error && !loading && (
           <div className="event-explorer__error-banner" role="alert">
diff --git a/dashboard/src/pages/TemplatesPage.tsx b/dashboard/src/pages/TemplatesPage.tsx
index 20e932d8..10b23ff0 100644
--- a/dashboard/src/pages/TemplatesPage.tsx
+++ b/dashboard/src/pages/TemplatesPage.tsx
@@ -209,7 +209,22 @@ export function TemplatesPage() {
   }
 
   function renderList() {
-    if (loading) return <div>Loading templates...</div>;
+    if (loading) {
+      return (
+        <div className="templates-list" aria-busy="true" aria-label="Loading templates">
+          <div className="templates-list__header">
+            <h3>Templates</h3>
+          </div>
+          <div className="templates-list__items templates-list__items--skeleton" role="status">
+            {Array.from({ length: 3 }).map((_, index) => (
+              <div key={index} className="templates-list__item templates-list__item--skeleton">
+                <div className="skeleton-block skeleton-block--row" />
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    }
 
     return (
       <div className="templates-list">
diff --git a/dashboard/src/services/timelineApi.ts b/dashboard/src/services/timelineApi.ts
index 274c9be3..e2c78d5d 100644
--- a/dashboard/src/services/timelineApi.ts
+++ b/dashboard/src/services/timelineApi.ts
@@ -1,13 +1,6 @@
 import type { NotificationTimeline } from '../types/timeline';
 import { getEventsApiBaseUrl } from '../config/eventsApiUrl';
 
-// globalThis.__VITE_EVENTS_API_URL__ is injected by Vite's define plugin (if configured).
-// In Jest/Node it is undefined, so we fall back to the default.
-declare const __VITE_EVENTS_API_URL__: string | undefined;
-
-const BASE_URL: string =
-  (typeof __VITE_EVENTS_API_URL__ !== 'undefined' ? __VITE_EVENTS_API_URL__ : '') ||
-  'http://localhost:8787';
 const BASE_URL = getEventsApiBaseUrl();
 
 export async function fetchTimeline(notificationId: number): Promise<NotificationTimeline> {
diff --git a/dashboard/src/store/eventStore.test.tsx b/dashboard/src/store/eventStore.test.tsx
index d1310c55..296bfc36 100644
--- a/dashboard/src/store/eventStore.test.tsx
+++ b/dashboard/src/store/eventStore.test.tsx
@@ -70,7 +70,6 @@ describe('pagination + filter interaction', () => {
     const events = generateMockEvents(200);
     useEventStore.setState({
       events,
-      filters: { search: '', contractAddress: 'all', eventType: 'all' },
       filters: { search: '', contractAddress: 'all', eventType: 'all', status: 'all', dateFrom: '', dateTo: '' },
       isLoading: false,
       error: null,
@@ -94,7 +93,6 @@ describe('pagination + filter interaction', () => {
   it('filter change resets scroll position to top', async () => {
     useEventStore.setState({
       events: generateMockEvents(100),
-      filters: { search: '', contractAddress: 'all', eventType: 'all' },
       filters: { search: '', contractAddress: 'all', eventType: 'all', status: 'all', dateFrom: '', dateTo: '' },
       isLoading: false,
       error: null,
@@ -120,7 +118,7 @@ describe('pagination + filter interaction', () => {
 
 describe('stale cache regression tests', () => {
   beforeEach(() => {
-    useEventStore.setState({ events: [], filters: { search: '', contractAddress: 'all', eventType: 'all' }, isLoading: false, error: null });
+    useEventStore.setState({ events: [], filters: { search: '', contractAddress: 'all', eventType: 'all', status: 'all', dateFrom: '', dateTo: '' }, isLoading: false, error: null });
   });
 
   it('setEvents with an updated record replaces the stale copy, not silently dropped', () => {
diff --git a/dashboard/src/store/eventStore.ts b/dashboard/src/store/eventStore.ts
index 3c1a7775..13b5acf2 100644
--- a/dashboard/src/store/eventStore.ts
+++ b/dashboard/src/store/eventStore.ts
@@ -1,6 +1,10 @@
 import { create } from 'zustand';
-import type { BlockchainEvent, EventFilters, NotificationStatus } from '../types/event';
-import { NOTIFICATION_STATUS_EVENTS } from '../types/event';
+import type {
+  BlockchainEvent,
+  EventFilters,
+  NotificationReadFilter,
+  NotificationStatus,
+} from '../types/event';
 import { filterEvents } from '../utils/eventData';
 
 interface EventStoreState {
@@ -22,7 +26,7 @@ interface EventStoreState {
   setSearch: (search: string) => void;
   setContractFilter: (contractAddress: string) => void;
   setEventTypeFilter: (eventType: string) => void;
-  setStatusFilter: (status: NotificationStatus) => void;
+  setStatusFilter: (status: NotificationReadFilter) => void;
   setDateFrom: (dateFrom: string) => void;
   setDateTo: (dateTo: string) => void;
   setLoading: (isLoading: boolean) => void;
diff --git a/dashboard/src/store/notificationStatusSync.test.tsx b/dashboard/src/store/notificationStatusSync.test.tsx
index 7c9efd8c..02ddf8b9 100644
--- a/dashboard/src/store/notificationStatusSync.test.tsx
+++ b/dashboard/src/store/notificationStatusSync.test.tsx
@@ -45,7 +45,7 @@ function makeEvent(overrides: Partial<BlockchainEvent> = {}): BlockchainEvent {
 beforeEach(() => {
   useEventStore.setState({
     events: [],
-    filters: { search: '', contractAddress: 'all', eventType: 'all' },
+    filters: { search: '', contractAddress: 'all', eventType: 'all', status: 'all', dateFrom: '', dateTo: '' },
     isLoading: false,
     error: null,
     lastFetchedAt: 0,
diff --git a/dashboard/src/types/event.ts b/dashboard/src/types/event.ts
index 58f4e32c..41c64a82 100644
--- a/dashboard/src/types/event.ts
+++ b/dashboard/src/types/event.ts
@@ -49,13 +49,14 @@ export interface BlockchainEvent {
   read?: boolean;
 }
 
-export type NotificationStatus = 'all' | 'read' | 'unread';
+/** Read/unread filter for Event Explorer notification lists (not delivery status). */
+export type NotificationReadFilter = 'all' | 'read' | 'unread';
 
 export interface EventFilters {
   search: string;
   contractAddress: string;
   eventType: string;
-  status: NotificationStatus;
+  status: NotificationReadFilter;
   dateFrom: string; // ISO date string "YYYY-MM-DD" or ""
   dateTo: string;   // ISO date string "YYYY-MM-DD" or ""
 }
diff --git a/dashboard/src/utils/eventData.ts b/dashboard/src/utils/eventData.ts
index e093ad0d..47538e3e 100644
--- a/dashboard/src/utils/eventData.ts
+++ b/dashboard/src/utils/eventData.ts
@@ -37,7 +37,7 @@ export function filterEvents(
   search: string,
   contractAddress: string,
   eventType: string,
-  status: import('../types/event').NotificationStatus = 'all',
+  status: import('../types/event').NotificationReadFilter = 'all',
   dateFrom = '',
   dateTo = ''
 ): BlockchainEvent[] {

From 78f55812e9ac63e9b78ce47b5a0e7c310d3e4630 Mon Sep 17 00:00:00 2001
From: susanyusuf <susanyusuf1@gmail.com>
Date: Sat, 25 Jul 2026 11:33:51 +0100
Subject: [PATCH 2/2] fix: skip Cloudflare preview deploy for fork PRs

Fork PRs cannot access CLOUDFLARE_API_TOKEN. Keep the dashboard build as the real gate and only deploy when the PR head is in the same repo.
---
 .github/workflows/preview.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
index 84d9f4f8..19bf4b00 100644
--- a/.github/workflows/preview.yml
+++ b/.github/workflows/preview.yml
@@ -38,8 +38,11 @@ jobs:
           VITE_STELLAR_NETWORK: TESTNET
         run: npm run build
 
+      # Fork PRs cannot access org secrets (CLOUDFLARE_API_TOKEN), so skip deploy
+      # for forks. Same-repo PRs still get Cloudflare preview deployments.
       - name: Deploy to Cloudflare Pages
         id: deploy
+        if: github.event.pull_request.head.repo.full_name == github.repository
         uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
@@ -47,6 +50,7 @@ jobs:
           command: pages deploy dashboard/dist --project-name=notify-chain-dashboard --branch=pr-${{ github.event.pull_request.number }}
 
       - name: Post preview URL comment
+        if: github.event.pull_request.head.repo.full_name == github.repository && steps.deploy.outcome == 'success'
         uses: actions/github-script@v7
         env:
           DEPLOYMENT_URL: ${{ steps.deploy.outputs.deployment-url }}