Adds loading spinner and highlights new SSE events

Improves visibility when syncing events by indicating a loading state.
Highlights newly received items with a brief glow animation to help
identify them quickly.

Author: mbertelsen

src/components/WebhookInspector.css

@@ -5,8 +5,10 @@
 .webhook-events-status{font-size:12px;color:#999}
 .webhook-events-status.live{color:green}
 .webhook-events-ul{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
-.webhook-event-item{padding:10px;border-bottom:1px solid #f0f0f0;cursor:pointer}
+.webhook-event-item{padding:10px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background 0.2s}
 .webhook-event-item.selected{background:#f7fbff}
+.webhook-event-item.new-event{animation:eventGlow 0.5s ease-out;box-shadow:0 0 0 2px #4a90e2}
+@keyframes eventGlow{0%{box-shadow:0 0 8px 4px rgba(74,144,226,0.6),0 0 0 2px #4a90e2}100%{box-shadow:0 0 0 0 rgba(74,144,226,0),0 0 0 2px #4a90e2}}
 .event-type{font-size:13px;color:#333}
 .event-meta{font-size:12px;color:#777}
 .event-session-indicators{display:flex;gap:6px;margin-top:6px;align-items:center}
@@ -42,3 +44,14 @@
 .event-type-option input[type="checkbox"]{margin-right:8px;cursor:pointer}
 .event-type-label{font-size:13px;color:#333;-webkit-user-select:none;user-select:none}
 
+/* Loading Spinner Animation */
+.loading-spinner{display:inline-flex;align-items:center;gap:6px;color:#999}
+.loading-spinner-icon{width:14px;height:14px;border:2px solid #ddd;border-top-color:#4a90e2;border-radius:50%;animation:spin 0.8s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+.loading-text{animation:loadingPulse 1.5s ease-in-out infinite}
+@keyframes loadingPulse{0%,100%{opacity:0.6}50%{opacity:1}}
+
+/* Loading message in list */
+.loading-events-message{padding:20px;text-align:center;color:#666;display:flex;flex-direction:column;align-items:center;gap:12px}
+.loading-events-spinner{width:32px;height:32px;border:3px solid #e8e8e8;border-top-color:#4a90e2;border-radius:50%;animation:spin 0.8s linear infinite}
+

src/components/WebhookInspector.tsx

@@ -88,9 +88,11 @@ const getDeviceIdFromEvent = (e: EventItem) => {
 const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null, selectedBayId = null, clearSignal }) => {
   const [allEvents, setAllEvents] = React.useState<EventItem[]>([]);
   const [connected, setConnected] = React.useState(false);
+  const [isLoadingEvents, setIsLoadingEvents] = React.useState(false);
   const [selectedIndex, setSelectedIndex] = React.useState<number | null>(null);
   const [selectedEventTypes, setSelectedEventTypes] = React.useState<Set<string>>(new Set());
   const [showEventTypeDropdown, setShowEventTypeDropdown] = React.useState(false);
+  const [newEventIds, setNewEventIds] = React.useState<Set<string>>(new Set());
   const listRef = React.useRef<HTMLUListElement | null>(null);
   const listContainerRef = React.useRef<HTMLDivElement | null>(null);
   const dropdownRef = React.useRef<HTMLDivElement | null>(null);
@@ -106,6 +108,7 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
   React.useEffect(() => {
     if (!userPath) return;
     let cancelled = false;
+    setIsLoadingEvents(true);
     (async () => {
       try {
         const r = await fetch(`/api/webhook/${encodeURIComponent(userPath)}/events`);
@@ -126,6 +129,8 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
         }
       } catch (err) {
         console.warn('Failed to load events', err);
+      } finally {
+        if (!cancelled) setIsLoadingEvents(false);
       }
     })();
     return () => { cancelled = true; };
@@ -157,6 +162,19 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
           console.log('[SSE] Parsed event:', data.eventType, 'id:', data.id);
           const newItem: EventItem = { id: data.id, eventType: data.eventType, timestamp: data.timestamp, data: data.data, raw: data.raw, expanded: false };
 
+          // Mark this event as new for the glow animation
+          if (newItem.id) {
+            setNewEventIds(prev => new Set(prev).add(newItem.id!));
+            // Remove the "new" flag after 500ms
+            setTimeout(() => {
+              setNewEventIds(prev => {
+                const next = new Set(prev);
+                next.delete(newItem.id!);
+                return next;
+              });
+            }, 500);
+          }
+          
           // Process SessionInfo events to extract activity/course information
           if (data.eventType === 'TPS.SessionInfo') {
             console.log('[SSE] Processing SessionInfo event');
@@ -584,7 +602,14 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
       <div ref={listContainerRef} className="webhook-inspector-list" tabIndex={0} onKeyDown={onListKeyDown}>
         <div className="webhook-events-header">
           <strong>Events</strong>
-          <span className={`webhook-events-status ${connected ? 'live' : ''}`}>{connected ? 'live' : 'disconnected'}</span>
+          <span className={`webhook-events-status ${connected ? 'live' : ''}`}>
+            {isLoadingEvents ? (
+              <span className="loading-spinner">
+                <span className="loading-spinner-icon"></span>
+                <span className="loading-text">loading</span>
+              </span>
+            ) : (connected ? 'live' : 'disconnected')}
+          </span>
 
           {/* Event Type Filter Dropdown */}
           <div className="event-type-filter" ref={dropdownRef}>
@@ -627,7 +652,12 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
           </div>
         </div>
         <ul className="webhook-events-ul" ref={listRef}>
-          {visibleEvents.length === 0 ? (
+          {isLoadingEvents ? (
+            <li className="loading-events-message">
+              <div className="loading-events-spinner"></div>
+              <div>Loading events...</div>
+            </li>
+          ) : visibleEvents.length === 0 ? (
             <li className="no-events">No events yet.</li>
           ) : (
             allEvents.map((e, allIdx) => {
@@ -641,8 +671,14 @@ const WebhookInspector: React.FC<Props> = ({ userPath, selectedDeviceId = null,
               const customerColor = getColorForId(customerSessionId, customerSessionColors);
               const activityColor = getColorForId(activitySessionId, activitySessionColors);
 
+              const isNew = e.id && newEventIds.has(e.id);
+              
               return (
-                <li key={e.id || allIdx} className={`webhook-event-item ${selectedIndex === visibleIdx ? 'selected' : ''}`} onClick={() => select(visibleIdx)}>
+                <li 
+                  key={e.id || allIdx} 
+                  className={`webhook-event-item ${selectedIndex === visibleIdx ? 'selected' : ''} ${isNew ? 'new-event' : ''}`} 
+                  onClick={() => select(visibleIdx)}
+                >
                   <div className="event-type">{e.eventType}</div>
                   <div className="event-meta">{new Date(e.timestamp).toLocaleString()}</div>
                   <div className="event-session-indicators">