Delay in updating the "current time" indicator

[ap8838]

Issue Description:

We are experiencing a delay in updating the "current time" indicator in our session view. Despite polling data every 10 seconds and using useEffect to set the current time frequently, the current time line on the calendar only moves every minute. This causes the timeline and session highlight to be out of sync with real time.

Code :

import React, { useState, useEffect } from "react";
import moment from "moment-timezone";

const DEFAULT_STEP_SIZE_IN_MINUTES = 15;
const SHIFT_POLLING_RATE = 10000; // 10 seconds

const MySessionsView = () => {
  const timezone = "America/New_York"; // Example timezone
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [shiftEvents, setShiftEvents] = useState([]);
  const [calendarStepSize, setCalendarStepSize] = useState(DEFAULT_STEP_SIZE_IN_MINUTES);

  const fetchSessionData = () => {
    const startTime = moment().tz(timezone).startOf("day").toISOString();
    const endTime = moment().tz(timezone).endOf("day").toISOString();
    console.log("Fetching data from", startTime, "to", endTime);
    
    setShiftEvents([
      {
        id: 1,
        start: moment().tz(timezone).subtract(1, 'hour').toDate(),
        end: moment().tz(timezone).add(1, 'hour').toDate(),
        title: "Sample Shift",
      },
    ]);
  };

  useEffect(() => {
    fetchSessionData(); // Initial fetch

    const intervalId = setInterval(() => {
      fetchSessionData();
    }, SHIFT_POLLING_RATE);

    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setSelectedDate(new Date());
    }, 1000); // Poll current time every 1 second

    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    if (shiftEvents.length > 0) {
      const eventDurations = shiftEvents.map(event =>
        moment(event.end).diff(moment(event.start), 'minutes')
      );
      const minEventDuration = Math.min(...eventDurations);
      const stepSize = Math.ceil((minEventDuration + 1) / 2);
      setCalendarStepSize(stepSize);
    }
  }, [shiftEvents]);

  return (
    <div>
      <h3>Current Time: {selectedDate.toLocaleTimeString()}</h3>
      <div>
        <h4>Shift Events for Today:</h4>
        {shiftEvents.map((event) => (
          <div key={event.id}>
            {event.title} - {moment(event.start).format("HH:mm")} to {moment(event.end).format("HH:mm")}
          </div>
        ))}
      </div>
      <p>Calendar Step Size: {calendarStepSize} minutes</p>
    </div>
  );
};

export default MySessionsView;

Problem: The current time line (or the time indicator) does not update as expected in real-time, despite setting a 1-second interval to update the current time (selectedDate). The calendar or session view is visually delayed, even though the polling is occurring every 10 seconds.

Expected Behavior: The current time line should smoothly update every second, or at least much more frequently, to stay in sync with real time.

Current Setup: We are fetching data every 10 seconds and updating the time line every second, but it still feels like there’s a delay (the line appears to move every minute rather than every second).

What might be causing the delay in the current time line updates?

Are there any known limitations with React’s useEffect or setInterval that could prevent frequent updates from showing in the UI?

Could we optimize the polling and time updates to better sync the timeline with real time?