improve loading performance of settings UI

This commit is contained in:
SethBurkart123
2024-03-27 23:54:53 +11:00
parent 073ba4d0d5
commit 31da7e8ded
5 changed files with 28 additions and 9 deletions
+1 -1
View File
@@ -56,7 +56,7 @@
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"preact": "^10.20.0", "preact": "^10.20.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-best-gradient-color-picker": "^3.0.5", "react-best-gradient-color-picker": "3.0.5",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-router-dom": "^6.22.0", "react-router-dom": "^6.22.0",
"rimraf": "^5.0.5", "rimraf": "^5.0.5",
+10
View File
@@ -0,0 +1,10 @@
import Browser from "webextension-polyfill";
console.log('hi');
(async () => {
const result = await Browser.storage.local.get();
if (result.DarkMode) {
document.body.classList.add('dark');
}
})();
-5
View File
@@ -11,7 +11,6 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
if (RanOnce) return; if (RanOnce) return;
RanOnce = true; RanOnce = true;
// get the current settings state
// @ts-expect-error - TODO: Fix this // @ts-expect-error - TODO: Fix this
browser.storage.local.get().then((result: MainConfig) => { browser.storage.local.get().then((result: MainConfig) => {
setSettingsState({ setSettingsState({
@@ -27,10 +26,6 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
transparencyEffects: result.transparencyEffects, transparencyEffects: result.transparencyEffects,
theme: result.theme theme: result.theme
}); });
if (result.DarkMode) {
document.body.classList.add('dark');
}
}); });
}); });
+13 -1
View File
@@ -4,11 +4,23 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BetterSEQTA+ Settings</title> <title>BetterSEQTA+ Settings</title>
<style>
body {
padding: 0;
width: 384px;
height: 600px;
}
body.dark {
background-color: rgb(39 39 42);
}
</style>
</head> </head>
<body style="width: 384px; height: 600px;"> <body>
<div id="ExtensionPopup"> <div id="ExtensionPopup">
</div> </div>
<script type="module" src="./main.tsx"></script> <script type="module" src="./main.tsx"></script>
<script type="module" src="./dark.ts"></script>
</body> </body>
</html> </html>
+4 -2
View File
@@ -8,8 +8,10 @@ import font from '../resources/fonts/IconFamily.woff'
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
browser.storage.local.get([ "telemetry" ]).then((telemetry) => { browser.storage.local.get().then(({ telemetry, DarkMode }) => {
if (telemetry.telemetry === true) if (DarkMode) document.body.classList.add('dark');
if (telemetry === true)
Sentry.init({ Sentry.init({
dsn: "https://4bc7197431b170218e15daba4095d08b@o4506347383291904.ingest.sentry.io/4506347394105344", dsn: "https://4bc7197431b170218e15daba4095d08b@o4506347383291904.ingest.sentry.io/4506347394105344",
integrations: [ integrations: [