fix: Glitch theme applies on launch

[louis-jan]

Describe Your Changes

There’s an issue with an app where when the user launches the app with the first thread is a large one, it glitches the app’s theme a bit before the conversation is loaded. This results in a very ugly display, with only a border and a translucent background.

This fix intends to store the previously set settings in the localStorage., ensuring that themes are applied effectively without the need to load JSON files from the disk.

Before:

After:

Notes:
Ordered list offscreen issue is filed in another issue

Changes made

This diff introduces several changes to the Setting.atom.ts and useLoadTheme.ts files, as follows:

Setting.atom.ts Changes:

1. Atoms and Constants Updates:
   • New constants THEME_DATA, THEME_OPTIONS, and THEME_PATH are defined.
   • The themesOptionsAtom, janThemesPathAtom, and themeDataAtom are updated to use atomWithStorage, allowing them to persist in storage.
   • These atoms now have storage keys and enable the getOnInit option for initialization.

useLoadTheme.ts Changes:

1. Atom Imports:

   • The import for useSetAtom from jotai is removed because it is no longer used.

2. useLoadTheme Logic:

   • The hook useLoadTheme has been refactored to use useAtom for themeOptions and themePath instead of useSetAtom.
   • A new useCallback hook, applyTheme, is introduced to handle theme application logic. It first checks if themeData, themeOptions, or themePath is missing - if so, it calls getThemes. Otherwise, it applies CSS variables through a style tag in the document's head.
   • The useEffect now relies on applyTheme instead of directly calling getThemes.

These changes primarily focus on improving theme persistence and application by leveraging atomWithStorage in Recoil Jotai and optimizing the effect hooks.

[github-actions]

Barecheck - Code coverage report

Total: 69.7%

Your code coverage diff: 0.16% ▴

Uncovered files and lines

File	Lines
web/hooks/useLoadTheme.ts	32-34, 91-95