Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-07-27 19:29:19 +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> </script>
</head> </head>
<body class="cpd-theme-dark"> <body class="nodisplay">
<div id="root"></div> <div id="root"></div>
</body> </body>
</html> </html>

4
src/index.css
View File

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

9
src/useTheme.ts
View File

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