Fix AgendaSkeleton displaying on every event reload

[Copilot]

AgendaSkeleton was rendering on every event change/reload, obstructing the user's view. It should only appear on initial page load.

Changes

New LoadingProgressLine component

• Absolute-positioned 1px animated gradient bar at timedEvents section top (z-50)
• Color transitions: blue → purple → pink
• Non-obstructive alternative for subsequent reloads
• Positioned within and at the top of timedEvents section (ID_GRID_EVENTS_TIMED)

Agenda component

• Moved loading state logic from TimedAgendaEvents to Agenda component
• Added hasLoadedOnce ref to track first load completion
• LoadingProgressLine rendered inside ID_GRID_EVENTS_TIMED div
• Shows progress line when hasLoadedOnce.current && isLoading

TimedAgendaEvents component

• Maintains hasLoadedOnce ref for AgendaSkeleton display logic
• AgendaSkeleton: renders when !hasLoadedOnce.current
• Removed LoadingProgressLine rendering logic (moved to parent Agenda component)

// In Agenda component
const hasLoadedOnce = useRef(false);

useEffect(() => {
  if (!isLoading && timedEvents.length >= 0) {
    hasLoadedOnce.current = true;
  }
}, [isLoading, timedEvents]);

const showProgressLine = isLoading && hasLoadedOnce.current;

Users now see their events during reloads instead of a blocking skeleton overlay. The progress line appears at the top of the timedEvents section (ID_GRID_EVENTS_TIMED) and remains visible even when scrolling within the section.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Agenda event section event-changed re-rendering displays skeleton too frequently</issue_title>
<issue_description>### Where did this happen?

Hosted (app.compasscalendar.com), Local code with an up-to-date main branch

Expected Behavior

The page should show a reloading indicator without obstructing the user's view of the events. The Agenda skeleton should only be shown on the first load.

Current Behavior

Currently, the AgendaSkeleton is shown over the calendar-surface on every event reload or re-rendering. This overlays the calendar-even on subsequent reloads, making the user experience unstable.

Steps to Reproduce

1. Go to calendar view
2. Change or add an event
3. Observe the page reloads and the skeleton overlays the calendar surface
4. This happens on every event change, not just the initial load.

Possible Solution

Ensure the loading indicator (AgendaSkeleton) only appears on the first load. For subsequent event changes, show a non-obstructive reloading indicator instead, so the user can still see their current agenda events during reload.

Context

The frequent overlay disrupts workflow when responding to event changes in the agenda section. Users are unable to view their events during reloading, causing confusion. Currently, there is no workaround aside from waiting for reload to finish.</issue_description>

<agent_instructions>fix this by rendering the "AgendaSkeleton" Component once on first page load, and subsequently rendering an animated continous progress line component at the top of the "mainGrid" ID_GRID_MAIN. When the progress line appears, it should transition colors back-and-forth the line and remain fixed to the top of the mainGrid even when scrolling. The progrss line should show in place of the AgendaSkeleton for subsequent loading states.</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Agenda event section event-changed re-rendering displays skeleton too frequently #1349

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[victor-enogwe]

@copilot the LoadingProgressLine should appear within and at the top of the mainGrid not at the top of the document

[Copilot]

@copilot the LoadingProgressLine should appear within and at the top of the mainGrid not at the top of the document

Updated in commit 6d236e2. The LoadingProgressLine now uses absolute positioning and is rendered inside the mainGrid container at the top, instead of being fixed to the viewport.

[victor-enogwe]

@copilot update the LoadingProgressLine component to show at the top of "ID_GRID_EVENT_TIMED" - "timedEvents" div

[Copilot]

@copilot update the LoadingProgressLine component to show at the top of "ID_GRID_EVENT_TIMED" - "timedEvents" div

Updated in commit 15474ac. The LoadingProgressLine now appears at the top of the ID_GRID_EVENTS_TIMED div (timedEvents section) instead of inside the mainGrid. The loading state logic has been moved to the Agenda component.

[Copilot]

Pull request overview

This PR addresses an issue where the AgendaSkeleton was displayed on every event reload, obstructing the user's view of the agenda. The solution introduces a hasLoadedOnce tracking mechanism and a new LoadingProgressLine component to provide non-obstructive loading feedback after the initial load.

Key Changes:

• Introduced LoadingProgressLine component as a visual indicator for subsequent reloads
• Added hasLoadedOnce ref tracking in both Agenda and TimedAgendaEvents components to distinguish first load from subsequent reloads
• Modified skeleton display logic to only show AgendaSkeleton on first load when !hasLoadedOnce.current

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
LoadingProgressLine/LoadingProgressLine.tsx	New component for showing non-obstructive loading indicator on subsequent reloads
LoadingProgressLine/LoadingProgressLine.test.tsx	Basic tests for the new LoadingProgressLine component
TimedAgendaEvents.tsx	Added hasLoadedOnce ref to control when AgendaSkeleton is displayed
Agenda.tsx	Added hasLoadedOnce ref, integrated LoadingProgressLine rendering, and imported selectIsDayEventsProcessing selector
Agenda.test.tsx	Added test attempting to verify progress line behavior on subsequent loads
index.css	Added CSS animation keyframes for the progress line sliding effect