Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-04-06 07:20:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Don't render app until the widget is set.

Browse Source 
Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo K
2024-02-28 20:56:40 +01:00
parent 46a12c7476
commit e3ce95fe2f
3 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -13,7 +13,7 @@
</script>
</head>
<body class="cpd-theme-dark">
<body class="nodisplay">
<div id="root"></div>
</body>
</html>

4
src/index.css
View File

@@ -157,6 +157,10 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* We use this to not render the page at all until we know the theme.*/
.nodisplay {
opacity: 0;
}
html,
body,

9
src/useTheme.ts
View File

@@ -17,15 +17,15 @@ limitations under the License.
import { useLayoutEffect, useRef } from "react";
import { useUrlParams } from "./UrlParams";
import { widget } from "./widget";
export const useTheme = (): void => {
const { theme: themeName } = useUrlParams();
const previousTheme = useRef<string | null>(document.body.classList.item(0));
useLayoutEffect(() => {
// Don't update the current theme if the url does not contain a theme prop.
if (!themeName) return;
const theme = themeName.includes("light") ? "light" : "dark";
const themeHighContrast = themeName.includes("high-contrast") ? "-hc" : "";
// If the url does not contain a theme props we default to "dark".
const theme = themeName?.includes("light") ? "light" : "dark";
const themeHighContrast = themeName?.includes("high-contrast") ? "-hc" : "";
const themeString = "cpd-theme-" + theme + themeHighContrast;
if (themeString !== previousTheme.current) {
document.body.classList.remove(
@@ -37,5 +37,6 @@ export const useTheme = (): void => {
document.body.classList.add(themeString);
previousTheme.current = themeString;
}
document.body.classList.remove("nodisplay");
}, [previousTheme, themeName]);
};