Session player UI performance improvements

[linear]

Issues with repainting and causing lagging when the user interacts with the session player

Issues:

• Fix events autoscrolling jumping around #8831 (review)

[linear]

HIG-4758 Session player UI performance improvements

[greptile-apps]

To address the session player UI performance issues, consider the following steps:

1. Throttling and Debouncing: Ensure that event handlers, especially those related to user interactions like resizing and scrolling, are throttled or debounced to prevent excessive re-renders.

   import { throttle } from 'lodash';
   
   const onViewportChange = useCallback(
     throttle((_e) => {
       dispatch({
         type: PlayerActionType.updateViewport,
         viewport: _e as viewportResizeDimension,
       });
     }, FRAME_MS * 60),
     [],
   );

2. Memoization: Use useMemo and useCallback hooks to memoize expensive calculations and functions to avoid unnecessary re-renders.

   const playerFiller = useMemo(() => {
     const playerHeight = playerWrapperRef.current?.getBoundingClientRect().height;
     const height = ((playerHeight ?? 0) * 3) / 5;
     return <LoadingBox width={controllerWidth} height={height} />;
   }, [controllerWidth]);

3. Conditional Rendering: Avoid rendering components that are not visible or necessary. For example, conditionally render the PlayerCommentCanvas only when the player is ready.

   {isPlayerReady && (
     <PlayerCommentCanvas
       setModalPosition={setCommentModalPosition}
       modalPosition={commentModalPosition}
       setCommentPosition={setCommentPosition}
     />
   )}

4. Batch State Updates: Use useReducer to batch state updates and reduce the number of re-renders.

   const [state, dispatch] = useReducer(PlayerReducer, {
     ...PlayerInitialState,
     chunkEventsRef,
     isLoggedIn,
     isHighlightAdmin,
     markSessionAsViewed,
     fetchEventChunkURL,
   });

5. Optimize CSS: Ensure that CSS animations and transitions are optimized and do not cause layout thrashing. Use will-change property to hint the browser about the elements that will change.

   .playerWrapperV2 {
     will-change: transform, opacity;
   }

Implementing these changes should help improve the performance of the session player UI.

References

/frontend/src/pages/Player/PlayerHook/PlayerState.ts
/frontend/src/pages/Player/SessionView.tsx
/frontend/src/pages/Player/PlayerHook/PlayerHook.tsx

Ask Greptile