fix: app re-render issues caused by bad state handling

[louis-menlo]

Describe Your Changes

Re-rendering across components in the app caused poor performance. This PR addresses numerous instances of poor state handling that lead to this issue.

JotaiProvider and ThemeProvider now load only once, which also the same issue before. These providers hold the main app states and themes, which could lead to unforeseen performance problems.

App appearance, theme, and show welcome screen toggle once on launch, causing screens to flash (attempt to display then disappear) due to initial storage state settings. These settings should persist on load.

Previously, the thread screen re-renders 16 times on launch

Now it renders once (plus one due to Strict React debugging).

Changes made

1. Component Refactoring:

   • MainViewContainer: Moved the framer-motion animation logic from Layout to MainViewContainer and added memo for performance optimization.
   • ThreadScreen: Introduced ThreadPanels as a memoized component that conditionally renders OnDeviceStarterScreen or the thread panel components. Also, added WelcomeController to utilize the useStarterScreen hook.
   • Various components (ChatBody, ThreadCenterPanel, Thread) were memoized for performance optimization.

2. Simplification and Separation:

   • CoreConfigurator: Created a new component to handle core and extension setup logic, migrating this functionality from Providers.
   • The configuration and setup logic in Providers was moved to CoreConfigurator.

3. State Management Changes:

   • Replaced useAtom with useSetAtom in certain places, such as for setting state in Layout.
   • Implemented useMemo to optimize the computation of derived state, such as checking if any remote models are configured.

4. Jotai Atom Enhancements:

   • Modified the atomWithStorage to include an onInit option for certain atoms across multiple files, ensuring initial state setup is handled correctly.

5. Component Logic Adjustments:

   • OnDeviceStarterScreen: Removed the explicit props passing of extensionHasSettings and is now integrated with useStarterScreen.
   • Updated useStarterScreen to use useMemo for calculating isDownloadALocalModel and isShowStarterScreen flags, promoting efficient calculations and re-renders.

6. Miscellaneous:

   • Imports and hooks were adjusted to ensure all components and logic are encapsulated appropriately.
   • Simplified some method calls and hooks usage that involves the Jotai state management.

Overall, these changes focus on enhancing performance by using React's memoization patterns, refactoring for better code organization, and improving the management of component state and data flow.

[github-actions]

Barecheck - Code coverage report

Total: 69.63%

Your code coverage diff: 0.41% ▴

Uncovered files and lines

File	Lines
web/helpers/atoms/Thread.atom.ts	90-93, 96, 110, 146-147, 152, 162-164, 168
web/hooks/useStarterScreen.ts	35-36, 38, 42
web/screens/Thread/ThreadCenterPanel/index.tsx	38, 40, 43, 46, 49, 78-79, 85-86, 90, 92, 95, 98-99, 107-110, 113, 117, 119, 121, 127, 133-134, 154, 156
web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx	21, 23, 25, 30
web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx	63, 91, 97, 121, 142-143, 145, 168, 177, 179, 207, 230, 232, 263, 289, 295, 299, 304-305, 307, 336