💸 Events - Compare loaded Events by reference

Description
When loading events using react query the array reference will be changed every time a property from the infinite query changes (e.g. if the loading state changes). To fix a flickering issue that occurs when the user loads new events I added a check that occurs before the animation plays to make sure the values of the events match. ❌ This is operation is o(n) and we have a large number of events so its' quite inefficient.

Proposed solution

- [ ] memoize the previous value of the event list so that it only updates when the loading button is clicked or the filters change.
- [ ] pass the memoized value for the event list into the event list component
- [ ] update the event list to toggle visibility after comparing the reference for the event list and making sure it was updated

Screenshots

Figure Bad ❌ - comparing the previous events list by value in components/filter/events.tsx

Start by reading components/filter/events.tsx, where the current event-list comparison is described, and trace the event list component and React Query loading or filter changes. The work is done when the list uses a memoized event-list reference and visibility changes only after that reference is updated, without the existing value-by-value comparison or flicker.