Fixed: Speed up UI during refresh

Don't update state if we know items are equal to avoid reselections.
Don't pass LastInfoUpdate to frontend to prevent useless updates (the
field isn't used)

frontend/src/Store/Actions/Creators/createHandleActions.js

@@ -65,18 +65,31 @@ export default function createHandleActions(handlers, defaultState, section) {
       if (section === baseSection) {
         const newState = getSectionState(state, payloadSection);
         const items = newState.items;
-        const index = _.findIndex(items, { id: payload.id });
+
+        if (!newState.itemMap) {
+          newState.itemMap = _.zipObject(_.map(items, 'id'), _.range(items.length));
+        }
+
+        const index = payload.id in newState.itemMap ? newState.itemMap[payload.id] : -1;
 
         newState.items = [...items];
 
         // TODO: Move adding to it's own reducer
         if (index >= 0) {
           const item = items[index];
+          const newItem = { ...item, ...otherProps };
 
-          newState.items.splice(index, 1, { ...item, ...otherProps });
+          // if the item to update is equal to existing, then don't actually update
+          // to prevent costly reselections
+          if (_.isEqual(item, newItem)) {
+            return state;
+          }
+
+          newState.items.splice(index, 1, newItem);
         } else if (!updateOnly) {
-          newState.items.push({ ...otherProps });
-          newState.itemMap = _.zipObject(_.map(newState.items, 'id'), _.range(newState.items.length));
+          const newIndex = newState.items.push({ ...otherProps }) - 1;
+
+          newState.itemMap[payload.id] = newIndex;
         }
 
         return updateSectionState(state, payloadSection, newState);

frontend/src/Store/Selectors/createMovieClientSideCollectionItemsSelector.js

@@ -1,6 +1,6 @@
-import { createSelector } from 'reselect';
-import createDeepEqualSelector from './createDeepEqualSelector';
+import { createSelector, createSelectorCreator, defaultMemoize } from 'reselect';
 import createClientSideCollectionSelector from './createClientSideCollectionSelector';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
 
 function createUnoptimizedSelector(uiSection) {
   return createSelector(
@@ -26,8 +26,17 @@ function createUnoptimizedSelector(uiSection) {
   );
 }
 
+function movieListEqual(a, b) {
+  return hasDifferentItemsOrOrder(a, b);
+}
+
+const createMovieEqualSelector = createSelectorCreator(
+  defaultMemoize,
+  movieListEqual
+);
+
 function createMovieClientSideCollectionItemsSelector(uiSection) {
-  return createDeepEqualSelector(
+  return createMovieEqualSelector(
     createUnoptimizedSelector(uiSection),
     (movies) => movies
   );