From: Orvar Segerström Date: Mon, 26 Oct 2020 07:09:44 +0000 (+0100) Subject: Don't flash default theme on page load X-Git-Url: http://these/git/%7B%60%24%7BwebArchiveUrl%7D/%22%7B%7D/readmes/%7B%7D/%7Bthis.props.src%7D?a=commitdiff_plain;h=e03fe66a214318f021332d1eed3537310e900e81;p=lemmy-ui.git Don't flash default theme on page load --- diff --git a/src/client/index.tsx b/src/client/index.tsx index dfa9ad7..b7f216d 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -1,7 +1,11 @@ import { hydrate } from 'inferno-hydrate'; import { BrowserRouter } from 'inferno-router'; +import { initializeSite } from '../shared/initialize'; import { App } from '../shared/components/app'; +const site = window.isoData.site; +initializeSite(site); + const wrapper = ( diff --git a/src/server/index.tsx b/src/server/index.tsx index ef6ce08..6a7ffbe 100644 --- a/src/server/index.tsx +++ b/src/server/index.tsx @@ -13,6 +13,7 @@ import { lemmyHttp, setAuth } from '../shared/utils'; import { GetSiteForm, GetSiteResponse } from 'lemmy-js-client'; import process from 'process'; import { Helmet } from 'inferno-helmet'; +import { initializeSite } from '../shared/initialize'; const server = express(); const port = 1234; @@ -59,6 +60,19 @@ server.get('/*', async (req, res) => { lang, }; + initializeSite(site); + const user = site.my_user; + const userTheme = + user && + user.theme && + ` + + `; + const wrapper = ( @@ -95,8 +109,15 @@ server.get('/*', async (req, res) => { + ${userTheme || ''} + ${ + userTheme + ? '' + : ` + ` + } @@ -105,7 +126,7 @@ server.get('/*', async (req, res) => { Javascript is disabled. Actions will not work. - +

${root}

diff --git a/src/shared/components/app.tsx b/src/shared/components/app.tsx index 53d5c15..a435070 100644 --- a/src/shared/components/app.tsx +++ b/src/shared/components/app.tsx @@ -8,6 +8,7 @@ import { Navbar } from '../../shared/components/navbar'; import { Footer } from '../../shared/components/footer'; import { Symbols } from '../../shared/components/symbols'; import { GetSiteResponse } from 'lemmy-js-client'; +import { UserService } from '../../shared/services'; import './styles.scss'; export interface AppProps { @@ -18,7 +19,6 @@ export class App extends Component { constructor(props: any, context: any) { super(props, context); } - render() { return ( <> diff --git a/src/shared/components/navbar.tsx b/src/shared/components/navbar.tsx index 63bc230..795368f 100644 --- a/src/shared/components/navbar.tsx +++ b/src/shared/components/navbar.tsx @@ -72,21 +72,6 @@ export class Navbar extends Component { this.parseMessage = this.parseMessage.bind(this); this.subscription = wsSubscribe(this.parseMessage); - - // The login - // TODO this needs some work - UserService.Instance.user = this.props.site.my_user; - i18n.changeLanguage(getLanguage()); - if (UserService.Instance.user) { - setTheme(UserService.Instance.user.theme); - } - - // if (!!this.props.site.my_user) { - // UserService.Instance.this.props.site.my_user); - // // UserService.Instance.user = this.props.site.my_user; - // } else { - // UserService.Instance.setUser(undefined); - // } } componentDidMount() { diff --git a/src/shared/initialize.ts b/src/shared/initialize.ts new file mode 100644 index 0000000..555da5e --- /dev/null +++ b/src/shared/initialize.ts @@ -0,0 +1,9 @@ +import { GetSiteResponse } from 'lemmy-js-client'; +import { UserService } from './services'; +import { i18n } from './i18next'; +import { getLanguage } from './utils'; + +export const initializeSite = (site: GetSiteResponse) => { + UserService.Instance.user = site.my_user; + i18n.changeLanguage(getLanguage()); +}; diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 33ba140..228aa9a 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -443,32 +443,34 @@ export function getMomentLanguage(): string { } export function setTheme(theme: string, forceReload: boolean = false) { - if (isBrowser() && (theme !== 'browser' || forceReload)) { - // This is only run on a force reload - if (theme == 'browser') { - theme = 'darkly'; - } + if (!isBrowser()) { + return; + } + if (theme === 'browser' && !forceReload) { + return; + } + // This is only run on a force reload + if (theme == 'browser') { + theme = 'darkly'; + } - // Unload all the other themes - for (var i = 0; i < themes.length; i++) { - let styleSheet = document.getElementById(themes[i]); - if (styleSheet) { - styleSheet.setAttribute('disabled', 'disabled'); - } + // Unload all the other themes + for (var i = 0; i < themes.length; i++) { + let styleSheet = document.getElementById(themes[i]); + if (styleSheet) { + styleSheet.setAttribute('disabled', 'disabled'); } - - document - .getElementById('default-light') - .setAttribute('disabled', 'disabled'); - document - .getElementById('default-dark') - .setAttribute('disabled', 'disabled'); - - // Load the theme dynamically - let cssLoc = `/static/assets/css/themes/${theme}.min.css`; - loadCss(theme, cssLoc); - document.getElementById(theme).removeAttribute('disabled'); } + + document + .getElementById('default-light') + ?.setAttribute('disabled', 'disabled'); + document.getElementById('default-dark')?.setAttribute('disabled', 'disabled'); + + // Load the theme dynamically + let cssLoc = `/static/assets/css/themes/${theme}.min.css`; + loadCss(theme, cssLoc); + document.getElementById(theme).removeAttribute('disabled'); } export function loadCss(id: string, loc: string) {