LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-25 22:01:13 +00:00
Code Issues Projects Releases Wiki Activity

Don't flash default theme on page load

Browse source
This commit is contained in:
Orvar Segerström 2020-10-26 08:09:44 +01:00
parent 2753b01923
commit e03fe66a21
6 changed files with 63 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/client/index.tsx
View file

@ -1,7 +1,11 @@
import { hydrate } from 'inferno-hydrate'; import { hydrate } from 'inferno-hydrate';
import { BrowserRouter } from 'inferno-router'; import { BrowserRouter } from 'inferno-router';
import { initializeSite } from '../shared/initialize';
import { App } from '../shared/components/app'; import { App } from '../shared/components/app';
const site = window.isoData.site;
initializeSite(site);
const wrapper = ( const wrapper = (
<BrowserRouter> <BrowserRouter>
<App site={window.isoData.site} /> <App site={window.isoData.site} />

23
src/server/index.tsx
View file

@ -13,6 +13,7 @@ import { lemmyHttp, setAuth } from '../shared/utils';
import { GetSiteForm, GetSiteResponse } from 'lemmy-js-client'; import { GetSiteForm, GetSiteResponse } from 'lemmy-js-client';
import process from 'process'; import process from 'process';
import { Helmet } from 'inferno-helmet'; import { Helmet } from 'inferno-helmet';
import { initializeSite } from '../shared/initialize';
const server = express(); const server = express();
const port = 1234; const port = 1234;
@ -59,6 +60,19 @@ server.get('/*', async (req, res) => {
lang, lang,
}; };
initializeSite(site);
const user = site.my_user;
const userTheme =
user &&
user.theme &&
`
<link
rel="stylesheet"
type="text/css"
href="/static/assets/css/themes/${user.theme}.min.css"
/>
`;
const wrapper = ( const wrapper = (
<StaticRouter location={req.url} context={isoData}> <StaticRouter location={req.url} context={isoData}>
<App site={isoData.site} /> <App site={isoData.site} />
@ -95,8 +109,15 @@ server.get('/*', async (req, res) => {
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" type="text/css" href="/static/styles/styles.css" /> <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
${userTheme || ''}
${
userTheme
? ''
: `
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/litely.min.css" id="default-light" media="(prefers-color-scheme: light)" /> <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/litely.min.css" id="default-light" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" type="text/css" href="/static/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" /> <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" />
`
}
</head> </head>
<body ${helmet.bodyAttributes.toString()}> <body ${helmet.bodyAttributes.toString()}>
@ -105,7 +126,7 @@ server.get('/*', async (req, res) => {
<b>Javascript is disabled. Actions will not work.</b> <b>Javascript is disabled. Actions will not work.</b>
</div> </div>
</noscript> </noscript>
<div id='root'>${root}</div> <div id='root'>${root}</div>
<script defer src='/static/js/client.js'></script> <script defer src='/static/js/client.js'></script>
</body> </body>

2
src/shared/components/app.tsx
View file

@ -8,6 +8,7 @@ import { Navbar } from '../../shared/components/navbar';
import { Footer } from '../../shared/components/footer'; import { Footer } from '../../shared/components/footer';
import { Symbols } from '../../shared/components/symbols'; import { Symbols } from '../../shared/components/symbols';
import { GetSiteResponse } from 'lemmy-js-client'; import { GetSiteResponse } from 'lemmy-js-client';
import { UserService } from '../../shared/services';
import './styles.scss'; import './styles.scss';
export interface AppProps { export interface AppProps {
@ -18,7 +19,6 @@ export class App extends Component<AppProps, any> {
constructor(props: any, context: any) { constructor(props: any, context: any) {
super(props, context); super(props, context);
} }
render() { render() {
return ( return (
<> <>

15
src/shared/components/navbar.tsx
View file

@ -72,21 +72,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
this.parseMessage = this.parseMessage.bind(this); this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage); 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() { componentDidMount() {

9
src/shared/initialize.ts Normal file
View file

@ -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());
};

52
src/shared/utils.ts
View file

@ -443,32 +443,34 @@ export function getMomentLanguage(): string {
} }
export function setTheme(theme: string, forceReload: boolean = false) { export function setTheme(theme: string, forceReload: boolean = false) {
if (isBrowser() && (theme !== 'browser' || forceReload)) { if (!isBrowser()) {
// This is only run on a force reload return;
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');
}
}
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');
} }
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');
}
}
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) { export function loadCss(id: string, loc: string) {