:bug fix(agenda-loading): fix AgendaSkeleton displaying on every event reload (#1390)

* Initial plan

* Add LoadingProgressLine component and update TimedAgendaEvents to use it

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* Add tests for LoadingProgressLine and update Agenda tests

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* Update LoadingProgressLine component comment for clarity

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* Move LoadingProgressLine inside mainGrid with absolute positioning

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* Move LoadingProgressLine to top of ID_GRID_EVENTS_TIMED (timedEvents div)

Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

* :bug fix(agenda-loading): make loading animation subtle

* refactor(tests): remove absolute positioning test for LoadingProgressLine

* feat(hooks): add useHasLoadedOnce hook for tracking initial load state

refactor(agenda): integrate useHasLoadedOnce in Agenda and TimedAgendaEvents components

* test(agenda): improve loading state handling and progress line rendering

* test(hooks): add tests for useHasLoadedOnce hook functionality

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: victor-enogwe <23452630+victor-enogwe@users.noreply.github.com>

Author: Copilot

packages/web/src/common/hooks/useHasLoadedOnce.test.ts

@@ -0,0 +1,66 @@
+import { renderHook } from "@testing-library/react";
+import { useHasLoadedOnce } from "./useHasLoadedOnce";
+
+describe("useHasLoadedOnce", () => {
+  it("should initialize as false", () => {
+    const { result } = renderHook(() => useHasLoadedOnce(true));
+    expect(result.current.current).toBe(false);
+  });
+
+  it("should remain false while loading", () => {
+    const { result } = renderHook(() => useHasLoadedOnce(true));
+    expect(result.current.current).toBe(false);
+  });
+
+  it("should become true when loading finishes", () => {
+    const { result, rerender } = renderHook(
+      ({ isLoading }) => useHasLoadedOnce(isLoading),
+      {
+        initialProps: { isLoading: true },
+      },
+    );
+
+    expect(result.current.current).toBe(false);
+
+    rerender({ isLoading: false });
+
+    expect(result.current.current).toBe(true);
+  });
+
+  it("should remain true if loading starts again", () => {
+    const { result, rerender } = renderHook(
+      ({ isLoading }) => useHasLoadedOnce(isLoading),
+      {
+        initialProps: { isLoading: true },
+      },
+    );
+
+    rerender({ isLoading: false });
+    expect(result.current.current).toBe(true);
+
+    rerender({ isLoading: true });
+    expect(result.current.current).toBe(true);
+  });
+
+  it("should respect the condition parameter", () => {
+    const { result, rerender } = renderHook(
+      ({ isLoading, condition }) => useHasLoadedOnce(isLoading, condition),
+      {
+        initialProps: { isLoading: true, condition: false },
+      },
+    );
+
+    // Loading finishes, but condition is false
+    rerender({ isLoading: false, condition: false });
+    expect(result.current.current).toBe(false);
+
+    // Condition becomes true
+    rerender({ isLoading: false, condition: true });
+    expect(result.current.current).toBe(true);
+  });
+
+  it("should handle condition being true initially", () => {
+    const { result } = renderHook(() => useHasLoadedOnce(false, true));
+    expect(result.current.current).toBe(true);
+  });
+});

packages/web/src/common/hooks/useHasLoadedOnce.ts

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+
+export const useHasLoadedOnce = (
+  isLoading: boolean,
+  condition: boolean = true,
+) => {
+  const hasLoadedOnce = useRef(false);
+
+  useEffect(() => {
+    if (!isLoading && condition) {
+      hasLoadedOnce.current = true;
+    }
+  }, [isLoading, condition]);
+
+  return hasLoadedOnce;
+};

packages/web/src/index.css

@@ -75,6 +75,18 @@
   --color-gray-300: hsl(219 8 46 / 90.2%);
   --color-gray-200: hsl(208 13 71 / 54.9%);
   --color-white-100: hsl(0 0 100);
+
+  /* Animations */
+  --animate-progress-slide: progressSlide 2s ease-out infinite;
+
+  @keyframes progressSlide {
+    0% {
+      width: 0%;
+    }
+    100% {
+      width: 600%;
+    }
+  }
 }
 
 @layer base {

packages/web/src/views/Day/components/Agenda/Agenda.test.tsx

@@ -4,6 +4,8 @@ import { screen } from "@testing-library/react";
 import { Schema_Event } from "@core/types/event.types";
 import { createStoreWithEvents } from "@web/__tests__/utils/state/store.test.util";
 import { compareEventsByStartDate } from "@web/common/utils/event/event.util";
+import { selectIsDayEventsProcessing } from "@web/ducks/events/selectors/event.selectors";
+import { eventsEntitiesSlice } from "@web/ducks/events/slices/event.slice";
 import { Agenda } from "@web/views/Day/components/Agenda/Agenda";
 import { renderWithDayProviders } from "@web/views/Day/util/day.test-util";
 import { useOpenEventForm } from "@web/views/Forms/hooks/useOpenEventForm";
@@ -14,10 +16,23 @@ jest.mock("@web/auth/auth.util", () => ({
 
 jest.mock("@web/views/Forms/hooks/useOpenEventForm");
 
+jest.mock("@web/ducks/events/selectors/event.selectors", () => {
+  const actual = jest.requireActual(
+    "@web/ducks/events/selectors/event.selectors",
+  );
+  return {
+    ...actual,
+    selectIsDayEventsProcessing: jest.fn(),
+  };
+});
+
 const renderAgenda = (
   events: Schema_Event[] = [],
   options?: { isProcessing?: boolean },
 ) => {
+  (selectIsDayEventsProcessing as jest.Mock).mockReturnValue(
+    options?.isProcessing ?? false,
+  );
   const store = createStoreWithEvents(events, options);
   const utils = renderWithDayProviders(<Agenda />, { store });
   return { ...utils, store };
@@ -84,6 +99,54 @@ describe("CalendarAgenda", () => {
     expect(skeleton).toBeInTheDocument();
   });
 
+  it("should show progress line on subsequent loads after first load", async () => {
+    const mockEvents: Schema_Event[] = [
+      {
+        _id: "event-1",
+        title: "Test Event",
+        startDate: "2024-01-15T10:00:00Z",
+        endDate: "2024-01-15T11:00:00Z",
+        isAllDay: false,
+      },
+    ];
+
+    // First render with events loaded (not processing)
+    const { store } = renderAgenda(mockEvents, { isProcessing: false });
+
+    // Verify initial load shows events, not skeleton or progress line
+    expect(await screen.findByText("Test Event")).toBeInTheDocument();
+    expect(screen.queryByTestId("agenda-skeleton")).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId("loading-progress-line"),
+    ).not.toBeInTheDocument();
+
+    // Dispatch request action to simulate reload
+    act(() => {
+      (selectIsDayEventsProcessing as jest.Mock).mockReturnValue(true);
+      store.dispatch(
+        eventsEntitiesSlice.actions.edit({
+          _id: "event-1",
+          event: {
+            ...mockEvents[0],
+            title: "Updated Title",
+            startDate: mockEvents[0].startDate!,
+            endDate: mockEvents[0].endDate!,
+            user: "user-123",
+            priority: "high",
+            origin: "google",
+          } as any,
+        }),
+      );
+    });
+
+    // On subsequent load after component has loaded once,
+    // should show progress line not skeleton
+    expect(
+      await screen.findByTestId("loading-progress-line"),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId("agenda-skeleton")).not.toBeInTheDocument();
+  });
+
   it("should not show skeleton or error when events are loaded", async () => {
     const mockEvents: Schema_Event[] = [
       {

packages/web/src/views/Day/components/Agenda/Agenda.tsx

@@ -11,10 +11,14 @@ import { useObservable } from "@ngneat/use-observable";
 import { Schema_Event, WithCompassId } from "@core/types/event.types";
 import { ID_GRID_EVENTS_TIMED } from "@web/common/constants/web.constants";
 import { useFloatingAtCursor } from "@web/common/hooks/useFloatingAtCursor";
+import { useHasLoadedOnce } from "@web/common/hooks/useHasLoadedOnce";
 import { CursorItem, nodeId$ } from "@web/common/hooks/useOpenAtCursor";
 import { compareEventsByStartDate } from "@web/common/utils/event/event.util";
 import { FloatingEventForm } from "@web/components/FloatingEventForm/FloatingEventForm";
-import { selectDayEvents } from "@web/ducks/events/selectors/event.selectors";
+import {
+  selectDayEvents,
+  selectIsDayEventsProcessing,
+} from "@web/ducks/events/selectors/event.selectors";
 import {
   allDayEvents$,
   eventsStore,
@@ -26,6 +30,7 @@ import { useAppSelector } from "@web/store/store.hooks";
 import { AgendaEventPreview } from "@web/views/Day/components/Agenda/Events/AgendaEventPreview/AgendaEventPreview";
 import { AllDayAgendaEvents } from "@web/views/Day/components/Agenda/Events/AllDayAgendaEvent/AllDayAgendaEvents";
 import { TimedAgendaEvents } from "@web/views/Day/components/Agenda/Events/TimedAgendaEvent/TimedAgendaEvents";
+import { LoadingProgressLine } from "@web/views/Day/components/Agenda/LoadingProgressLine/LoadingProgressLine";
 import { NowLine } from "@web/views/Day/components/Agenda/NowLine/NowLine";
 import { TimeLabels } from "@web/views/Day/components/Agenda/TimeLabels/TimeLabels";
 import { EventContextMenu } from "@web/views/Day/components/ContextMenu/EventContextMenu";
@@ -38,6 +43,8 @@ export function Agenda() {
   const [timedEvents] = useObservable(timedEvents$);
   const height = useRef<number>(0);
   const timedAgendaRef = useRef<HTMLElement | null>(null);
+  const isLoading = useAppSelector(selectIsDayEventsProcessing);
+  const hasLoadedOnce = useHasLoadedOnce(!!isLoading, timedEvents.length >= 0);
 
   const floating = useFloatingAtCursor((open, _e, reason) => {
     const dismissed = reason === "escape-key" || reason === "outside-press";
@@ -80,6 +87,8 @@ export function Agenda() {
     );
   }, [reduxEvents]);
 
+  const showProgressLine = isLoading && hasLoadedOnce.current;
+
   return (
     <>
       <section
@@ -88,6 +97,12 @@ export function Agenda() {
       >
         <AllDayAgendaEvents events={allDayEvents} interactions={interactions} />
 
+        {showProgressLine ? (
+          <LoadingProgressLine />
+        ) : (
+          <div className="h-0.5 border-t border-gray-400/20" />
+        )}
+
         <div
           id={ID_GRID_EVENTS_TIMED}
           ref={(e) => {
@@ -98,8 +113,7 @@ export function Agenda() {
           className={classNames(
             "relative flex flex-1 overflow-x-hidden overflow-y-auto",
             "focus-visible:rounded focus-visible:ring-2 focus-visible:outline-none",
-            "focus:outline-none focus-visible:ring-yellow-200",
-            "border-t border-gray-400/20 pt-2",
+            "mt-1 focus:outline-none focus-visible:ring-yellow-200",
           )}
           data-testid="calendar-scroll"
           tabIndex={0}

packages/web/src/views/Day/components/Agenda/Events/TimedAgendaEvent/TimedAgendaEvents.tsx

@@ -6,6 +6,7 @@ import { UseInteractionsReturn, useMergeRefs } from "@floating-ui/react";
 import { Schema_Event } from "@core/types/event.types";
 import { ID_GRID_MAIN } from "@web/common/constants/web.constants";
 import { useGridOrganization } from "@web/common/hooks/useGridOrganization";
+import { useHasLoadedOnce } from "@web/common/hooks/useHasLoadedOnce";
 import { Schema_GridEvent } from "@web/common/types/web.event.types";
 import {
   CompassDOMEvents,
@@ -43,6 +44,7 @@ export const TimedAgendaEvents = memo(
       const openEventForm = useOpenEventForm();
       const [ref, setRef] = useState<HTMLElement | null>(null);
       const mergedRef = useMergeRefs([setRef, _ref]);
+      const hasLoadedOnce = useHasLoadedOnce(!!isLoading, ref !== null);
 
       useGridOrganization(ref);
 
@@ -51,6 +53,9 @@ export const TimedAgendaEvents = memo(
         compassEventEmitter.emit(CompassDOMEvents.SCROLL_TO_NOW_LINE);
       }, [pathname]);
 
+      const showSkeleton =
+        (isLoading || ref === null) && !hasLoadedOnce.current;
+
       return (
         <Droppable
           {...interactions?.getReferenceProps({ onClick: openEventForm })}
@@ -65,14 +70,14 @@ export const TimedAgendaEvents = memo(
           style={{ height }}
         >
           {/* Event blocks */}
-          {isLoading || ref === null ? (
+          {showSkeleton ? (
             <AgendaSkeleton />
           ) : (
             events.map((event) => (
               <DraggableTimedAgendaEvent
                 key={event._id}
                 event={event as Schema_GridEvent}
-                bounds={ref}
+                bounds={ref!}
                 interactions={interactions}
                 isDraftEvent={draft?._id === event._id}
                 isNewDraftEvent={!timedEvents.find((e) => e._id === event._id)}

packages/web/src/views/Day/components/Agenda/LoadingProgressLine/LoadingProgressLine.test.tsx

@@ -0,0 +1,19 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { LoadingProgressLine } from "./LoadingProgressLine";
+
+describe("LoadingProgressLine", () => {
+  it("should render the progress line", () => {
+    render(<LoadingProgressLine />);
+
+    const progressLine = screen.getByTestId("loading-progress-line");
+    expect(progressLine).toBeInTheDocument();
+  });
+
+  it("should span full width", () => {
+    render(<LoadingProgressLine />);
+
+    const progressLine = screen.getByTestId("loading-progress-line");
+    expect(progressLine).toHaveClass("w-full");
+  });
+});

packages/web/src/views/Day/components/Agenda/LoadingProgressLine/LoadingProgressLine.tsx

@@ -0,0 +1,19 @@
+import classNames from "classnames";
+
+/**
+ * Loading progress line component that shows at the top of the timedEvents section (ID_GRID_EVENTS_TIMED)
+ * during subsequent event reloads. Displays an animated color-transitioning
+ * line that indicates loading state without obstructing the user's view.
+ */
+export function LoadingProgressLine() {
+  return (
+    <div
+      data-testid="loading-progress-line"
+      className={classNames(
+        "h-0.5 w-full",
+        "bg-linear-to-r/longer from-gray-500 to-gray-300",
+        "motion-safe:animate-progress-slide",
+      )}
+    />
+  );
+}