Faster Paint with delayed flush of Effects

[knaveenkumar3576]

This pull request enables faster paint of chat switch the changes to DND kit with the following changes:

Change 1: Changing useIsoMorphicLayoutEffect to useEffect Reason: Changing state in a layout effect can delay browser paint.

Details: The DND kit mutates state in a layout effect, but only for registering elements as draggable. This hurts performance as changing state in a layout effect can delay browser paint. In this case, there is no need to change state in a layout effect because this state change is only registering draggable elements which can wait until browser paint.

Example: A CodeSandbox example demonstrates how setting state in a layout effect delays browser paint.

Case 1: Changing state in a layout effect. Screenshot showing Paint after flush.

Case 2: Changing state in an effect. Screenshot showing Paint before flush.

Change 2: Updating useRect and useRects Reason: Removed the reducer implementation in favor of state.

Details: Similar to the first point, the state was changing in a layout effect when a user clicks and drag a DND node. Initially, we considered replacing useIsoMorphicLayoutEffect with useEffect. However, to avoid visual discrepancies, we replaced the useReducer with useState. This change ensures that even though the state updates within a layout effect, the paint is delayed only when there is a meaningful state change. This is because useReducer doesn't bail out of meaningless state updates, whereas useState can.

Automated Tests: We also ran Cypress and Unit Test on github repo to gain confidence on proposed changes. Here are the results