Remove delay between page loading and being blurred

lemmy-translations

@@ -1 +1 @@
-Subproject commit d250d15f4fbf3e1b9565529f7d0cea90c8270757
+Subproject commit e015033336375d2743a314b166a3c7c16526915e

src/client/index.tsx

@@ -1,7 +1,7 @@
 import { initializeSite } from "@utils/app";
 import { hydrate } from "inferno-hydrate";
 import { BrowserRouter } from "inferno-router";
-import { App } from "../shared/components/app/app";
+import App from "../shared/components/app/app";
 import { lazyHighlightjs } from "../shared/lazy-highlightjs";
 import { loadUserLanguage } from "../shared/services/I18NextService";
 import { verifyDynamicImports } from "../shared/dynamic-imports";

src/server/handlers/catch-all-handler.tsx

@@ -6,7 +6,7 @@ import { StaticRouter, matchPath } from "inferno-router";
 import { Match } from "inferno-router/dist/Route";
 import { renderToString } from "inferno-server";
 import { GetSiteResponse, LemmyHttp } from "lemmy-js-client";
-import { App } from "../../shared/components/app/app";
+import App from "../../shared/components/app/app";
 import {
   InitialFetchRequest,
   IsoDataOptionalSite,

src/shared/components/app/app.tsx

@@ -1,5 +1,11 @@
 import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app";
-import { Component, createRef, linkEvent } from "inferno";
+import {
+  Component,
+  RefObject,
+  createRef,
+  forwardRef,
+  linkEvent,
+} from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { IsoDataOptionalSite } from "../../interfaces";
@@ -16,48 +22,32 @@ import AnonymousGuard from "../common/anonymous-guard";
 import { destroyTippy, setupTippy } from "../../tippy";
 import AdultConsentModal from "../common/adult-consent-modal";
 
-export class App extends Component<any, any> {
+interface AppProps {
-  private isoData: IsoDataOptionalSite = setIsoData(this.context);
+  ref: RefObject<HTMLDivElement>;
-  private readonly mainContentRef = createRef<HTMLElement>();
+}
-  private readonly rootRef = createRef<HTMLDivElement>();
 
-  componentDidMount(): void {
+function handleJumpToContent(event) {
-    setupTippy(this.rootRef);
-  }
-
-  componentWillUnmount(): void {
-    destroyTippy();
-  }
-
-  handleJumpToContent(event) {
   event.preventDefault();
-    this.mainContentRef.current?.focus();
+}
-  }
+
+class App extends Component<AppProps, any> {
+  private isoData: IsoDataOptionalSite = setIsoData(this.context);
 
   render() {
     const siteRes = this.isoData.site_res;
     const siteView = siteRes?.site_view;
 
     return (
-      <>
+      <div id="app" className="lemmy-site" ref={this.props.ref}>
-        <Provider i18next={I18NextService.i18n}>
-          <div id="app" className="lemmy-site" ref={this.rootRef}>
         <button
           type="button"
           className="btn skip-link bg-light position-absolute start-0 z-3"
-              onClick={linkEvent(this, this.handleJumpToContent)}
+          onClick={linkEvent(this, handleJumpToContent)}
         >
           {I18NextService.i18n.t("jump_to_content", "Jump to content")}
         </button>
-            {siteView && (
+        {siteView && <Theme defaultTheme={siteView.local_site.default_theme} />}
-              <Theme defaultTheme={siteView.local_site.default_theme} />
-            )}
         <Navbar siteRes={siteRes} />
-            {siteRes?.site_view.site.content_warning && (
-              <AdultConsentModal
-                contentWarning={siteRes.site_view.site.content_warning}
-              />
-            )}
         <div className="mt-4 p-0 fl-1">
           <Switch>
             {routes.map(
@@ -117,8 +107,35 @@ export class App extends Component<any, any> {
         </div>
         <Footer site={siteRes} />
       </div>
-        </Provider>
+    );
-      </>
+  }
+}
+
+const AppForwardRef = forwardRef((props, ref) => <App {...props} ref={ref} />);
+
+export default class AppWrapper extends Component<any, any> {
+  private isoData: IsoDataOptionalSite = setIsoData(this.context);
+  private readonly rootRef = createRef<HTMLDivElement>();
+
+  componentDidMount(): void {
+    setupTippy(this.rootRef);
+  }
+
+  componentWillUnmount(): void {
+    destroyTippy();
+  }
+
+  render() {
+    const contentWarning =
+      this.isoData.site_res?.site_view.site.content_warning;
+
+    return (
+      <Provider i18next={I18NextService.i18n}>
+        {contentWarning && (
+          <AdultConsentModal contentWarning={contentWarning} />
+        )}
+        <AppForwardRef ref={this.rootRef} />
+      </Provider>
     );
   }
 }