applied various optimisations to UI

src/interface/components/BackgroundSelector.tsx

@@ -2,7 +2,6 @@ import { ChangeEvent, memo, useEffect, useState } from "react";
 import { downloadPresetBackground, openDB, readAllData, writeData } from "../hooks/BackgroundDataLoader";
 import presetBackgrounds from "../assets/presetBackgrounds";
 import "./BackgroundSelector.css";
-import browser from "webextension-polyfill";
 
 export interface Background {
   id: string;

src/interface/components/ThemeCover.tsx

@@ -14,7 +14,7 @@ type ThemeCoverProps = {
   onThemeDelete: (themeId: string) => void;
 };
 
-export const ThemeCover: React.FC<ThemeCoverProps> = ({
+export const ThemeCover: React.FC<ThemeCoverProps> = React.memo(({
   theme,
   downloaded,
   isSelected,
@@ -96,7 +96,7 @@ export const ThemeCover: React.FC<ThemeCoverProps> = ({
       </div>
     </button>
   );
-};
+});
 
 const LoadingSpinner = ({ size }: { size: number }) => {
   return <div style={{ width: `${size}px`, height: `${size}px` }} className={`animate-spin rounded-full border-2 border-white border-t-2 border-t-transparent`}></div>;

src/interface/pages/SettingsPage.tsx

@@ -7,6 +7,7 @@ import Shortcuts from './SettingsPage/Shortcuts';
 import Picker from '../components/Picker';
 import Themes from './SettingsPage/Themes';
 import { ToastContainer } from 'react-toastify';
+import { memo } from 'react';
 
 import browser from 'webextension-polyfill';
 
@@ -46,4 +47,4 @@ const SettingsPage = ({ standalone }: SettingsPage) => {
   );
 };
 
-export default SettingsPage;
+export default memo(SettingsPage);

src/interface/pages/SettingsPage/Settings.tsx

@@ -6,6 +6,7 @@ import { SettingsList } from '../../types/SettingsProps';
 import { useSettingsContext } from '../../SettingsContext';
 
 import browser from 'webextension-polyfill'
+import { memo } from 'react';
 
 const Settings: React.FC = () => {
   const { settingsState, setSettingsState } = useSettingsContext();
@@ -89,4 +90,4 @@ const Settings: React.FC = () => {
   );
 };
 
-export default Settings;
+export default memo(Settings);

src/interface/pages/SettingsPage/Themes.tsx

@@ -1,6 +1,7 @@
 import { FC, createRef, useState } from 'react';
 import BackgroundSelector from '../../components/BackgroundSelector';
 import ThemeSelector from '../../components/ThemeSelector';
+import { memo } from 'react';
 
 type ThemeSelectorRef = {
   disableTheme: () => void;
@@ -26,4 +27,4 @@ const Themes: FC = () => {
   );
 };
 
-export default Themes;
+export default memo(Themes);

src/interface/utils/cn.ts

@@ -1,6 +0,0 @@
-import { ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
- 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}