]> Untitled Git - lemmy-ui.git/commitdiff
projects / lemmy-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 2753b01)
Don't flash default theme on page load
authorOrvar Segerström <orvarsegerstrom@gmail.com>
Mon, 26 Oct 2020 07:09:44 +0000 (08:09 +0100)
committerOrvar Segerström <orvarsegerstrom@gmail.com>
Mon, 26 Oct 2020 07:12:41 +0000 (08:12 +0100)
src/client/index.tsx patch | blob | history
src/server/index.tsx patch | blob | history
src/shared/components/app.tsx patch | blob | history
src/shared/components/navbar.tsx patch | blob | history
src/shared/initialize.ts [new file with mode: 0644] patch | blob
src/shared/utils.ts patch | blob | history

diff --git a/src/client/index.tsx b/src/client/index.tsx
index dfa9ad7b5097a16063ac6f5bf525777e9de5008d..b7f216d9e4bef8f72efc531e3177a7da826b8416 100644 (file)
--- 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 = (
   <BrowserRouter>
     <App site={window.isoData.site} />
diff --git a/src/server/index.tsx b/src/server/index.tsx
index ef6ce08dad564b51e40a53185b853790b5cc3455..6a7ffbe418f090e63a98413ccc65d524d5499e7f 100644 (file)
--- 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 &&
+    `
+      <link
+        rel="stylesheet"
+        type="text/css"
+        href="/static/assets/css/themes/${user.theme}.min.css"
+      />
+    `;
+
   const wrapper = (
     <StaticRouter location={req.url} context={isoData}>
       <App site={isoData.site} />
@@ -95,8 +109,15 @@ server.get('/*', async (req, res) => {
 
            <!-- Styles -->
            <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/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" />
+           `
+           }
            </head>
 
            <body ${helmet.bodyAttributes.toString()}>
@@ -105,7 +126,7 @@ server.get('/*', async (req, res) => {
                  <b>Javascript is disabled. Actions will not work.</b>
                </div>
              </noscript>
-            
+
              <div id='root'>${root}</div>
              <script defer src='/static/js/client.js'></script>
            </body>
diff --git a/src/shared/components/app.tsx b/src/shared/components/app.tsx
index 53d5c151995d465cd07fce3c1b34521afb804966..a43507053d311ddc1e46f3ac65bdf2f15d63380e 100644 (file)
--- 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<AppProps, any> {
   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 63bc230c5a4c2e40ef3e519b66df6d284e722920..795368f76a822548554183a9b251b96c575fd548 100644 (file)
--- a/src/shared/components/navbar.tsx
+++ b/src/shared/components/navbar.tsx
@@ -72,21 +72,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
 
     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 (file)
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 33ba140b2bcf0e65ab871f1e41e95a907b14b726..228aa9a866c3a19aa58830880cf0ad0217b4a2de 100644 (file)
--- 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) {
Unnamed repository; edit this file 'description' to name the repository.