Avoid react flickering

react
1

I’m using the react-big-calendar package with drag-and-drop functionality in my meteor project. Therefore a components renders the calendar like this:

<DnDCalendar
   ...
   events={myEvents}
   onEventDrop={(args) => {
      eventTimeUpdate(args.event, args.start, args.end, args.isAllDay,args.resourceId);
      }}
/>

Here myEvents get loaded with the useTracker Hook:

const {
    myEvents,
    isLoadingEvents,
  }: {
    events: any;
    isLoadingEvents: boolean;
  } = useTracker(() => {
    const eventsSub = Meteor.subscribe("events.list");

    const myEvents = EventsDB.find({}).fetch();

    return {
      myEvents
      isLoadingEvents: !eventsSub.ready(),
    };
  }, []);

The function eventTimeUpdate is defined as:

appointmentUpdateStartAndEndTime.call(
{
    appointmentId: event?._id,
    start: start,
    end: end,
    resourceId: resourceId != null ? resourceId : event.resourceId, //only change if new is not null
    isAllDay: isAllDay ? true : false,
},
(err: Meteor.Error, res: any) => {
    if (err) {
        message.error("Error " + err);
    } else {
        message.success("Success!");
    }
}

and the appointmentUpdateStartAndEndTime() calls this inside:

const numOfEffectedDocuments = AppointmentsDB.update(
      appointmentId,
      {
        $set: {
          resourceId,
          isAllDay,
          start,
          end,
          logDateTime: moment().toDate(),
        },
      },
      undefined, //third argument are optional options
      (err: Error, numOfEffectedDocuments: number) => {
        if (err) {
          throw new Meteor.Error("Database Update Error", `Could not update Appointment with id=${appointmentId}.`);
        }
        log.info(numOfEffectedDocuments);
      }
    );

All works as expected, however when i drag and drop an event, the event flickers, i.e. it jumps back to the original time and then one blink later, it is where it should be. How can i avoid this “wrong” loading?

2

try to put the calendar in a child component with React.memo to avoid unwanted component updates.
The component update because isLoadingEvents is modifyed on update, you should only update the component on data changes.

1 Like