rzerres/element-call
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Theme loading without flickering (#2233)

Browse Source
This commit is contained in:
Timo
2024-03-13 14:58:21 +01:00
committed by GitHub
parent 4a9a58475f
commit c932dd8c9b
8 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -62,7 +62,7 @@
"i18next-http-backend": "^2.0.0",
"livekit-client": "^2.0.2",
"lodash": "^4.17.21",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#8123e9a3f1142a7619758c0a238172b007e3a06a",
"matrix-js-sdk": "github:matrix-org/matrix-js-sdk#d55c6a36df539f6adacc335efe5b9be27c9cee4a",
"matrix-widget-api": "^1.3.1",
"normalize.css": "^8.0.1",
"pako": "^2.0.4",

3
public/index.html
View File

@@ -13,7 +13,8 @@
</script>
</head>
<body class="cpd-theme-dark">
<!-- The default class is: .no-theme {display: none}. It will be overwritten once the app is loaded. -->
<body class="no-theme">
<div id="root"></div>
</body>
</html>

2
src/App.tsx
View File

@@ -72,7 +72,9 @@ export const App: FC<AppProps> = ({ history }) => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
Initializer.init()?.then(() => {
if (loaded) return;
setLoaded(true);
widget?.api.sendContentLoaded();
});
});

6
src/FullScreenView.tsx
View File

@@ -27,6 +27,7 @@ import styles from "./FullScreenView.module.css";
import { TranslatedError } from "./TranslatedError";
import { Config } from "./config/Config";
import { RageshakeButton } from "./settings/RageshakeButton";
import { useUrlParams } from "./UrlParams";
interface FullScreenViewProps {
className?: string;
@@ -37,12 +38,11 @@ export const FullScreenView: FC<FullScreenViewProps> = ({
className,
children,
}) => {
const { hideHeader } = useUrlParams();
return (
<div className={classNames(styles.page, className)}>
<Header>
<LeftNav>
<HeaderLogo />
</LeftNav>
<LeftNav>{!hideHeader && <HeaderLogo />}</LeftNav>
<RightNav />
</Header>
<div className={styles.container}>

1
src/auth/useInteractiveRegistration.ts
View File

@@ -50,6 +50,7 @@ export const useInteractiveRegistration = (): {
useEffect(() => {
if (widget) return;
// An empty registerRequest is used to get the privacy policy and recaptcha key.
authClient.current!.registerRequest({}).catch((error) => {
setPrivacyPolicyUrl(
error.data?.params["m.login.terms"]?.policies?.privacy_policy?.en?.url,

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.*/
.no-theme {
opacity: 0;
}
html,
body,

8
src/useTheme.ts
View File

@@ -22,10 +22,9 @@ 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 +36,6 @@ export const useTheme = (): void => {
document.body.classList.add(themeString);
previousTheme.current = themeString;
}
document.body.classList.remove("no-theme");
}, [previousTheme, themeName]);
};

2
src/widget.ts
View File

@@ -158,6 +158,8 @@ export const widget = ((): WidgetHelpers | null => {
useE2eForGroupCall: e2eEnabled,
fallbackICEServerAllowed: allowIceFallback,
},
// ContentLoaded event will be sent as soon as the theme is set (see useTheme.ts)
false,
);
const clientPromise = new Promise<MatrixClient>((resolve) => {