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,9 +22,99 @@ 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 {
+  ref: RefObject<HTMLDivElement>;
+}
+
+function handleJumpToContent(event) {
+  event.preventDefault();
+}
+
+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}>
+        <button
+          type="button"
+          className="btn skip-link bg-light position-absolute start-0 z-3"
+          onClick={linkEvent(this, handleJumpToContent)}
+        >
+          {I18NextService.i18n.t("jump_to_content", "Jump to content")}
+        </button>
+        {siteView && <Theme defaultTheme={siteView.local_site.default_theme} />}
+        <Navbar siteRes={siteRes} />
+        <div className="mt-4 p-0 fl-1">
+          <Switch>
+            {routes.map(
+              ({
+                path,
+                component: RouteComponent,
+                fetchInitialData,
+                getQueryParams,
+              }) => (
+                <Route
+                  key={path}
+                  path={path}
+                  exact
+                  component={routeProps => {
+                    if (!fetchInitialData) {
+                      FirstLoadService.falsify();
+                    }
+
+                    let queryProps = routeProps;
+                    if (getQueryParams && this.isoData.site_res) {
+                      // ErrorGuard will not render its children when
+                      // site_res is missing, this guarantees that props
+                      // will always contain the query params.
+                      queryProps = {
+                        ...routeProps,
+                        ...getQueryParams(
+                          routeProps.location.search,
+                          this.isoData.site_res,
+                        ),
+                      };
+                    }
+
+                    return (
+                      <ErrorGuard>
+                        <div tabIndex={-1}>
+                          {RouteComponent &&
+                            (isAuthPath(path ?? "") ? (
+                              <AuthGuard {...routeProps}>
+                                <RouteComponent {...queryProps} />
+                              </AuthGuard>
+                            ) : isAnonymousPath(path ?? "") ? (
+                              <AnonymousGuard>
+                                <RouteComponent {...queryProps} />
+                              </AnonymousGuard>
+                            ) : (
+                              <RouteComponent {...queryProps} />
+                            ))}
+                        </div>
+                      </ErrorGuard>
+                    );
+                  }}
+                />
+              ),
+            )}
+            <Route component={ErrorPage} />
+          </Switch>
+        </div>
+        <Footer site={siteRes} />
+      </div>
+    );
+  }
+}
+
+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 mainContentRef = createRef<HTMLElement>();
   private readonly rootRef = createRef<HTMLDivElement>();
 
   componentDidMount(): void {
@@ -29,96 +125,17 @@ export class App extends Component<any, any> {
     destroyTippy();
   }
 
-  handleJumpToContent(event) {
-    event.preventDefault();
-    this.mainContentRef.current?.focus();
-  }
-
   render() {
-    const siteRes = this.isoData.site_res;
+    const contentWarning =
-    const siteView = siteRes?.site_view;
+      this.isoData.site_res?.site_view.site.content_warning;
 
     return (
-      <>
+      <Provider i18next={I18NextService.i18n}>
-        <Provider i18next={I18NextService.i18n}>
+        {contentWarning && (
-          <div id="app" className="lemmy-site" ref={this.rootRef}>
+          <AdultConsentModal contentWarning={contentWarning} />
-            <button
+        )}
-              type="button"
+        <AppForwardRef ref={this.rootRef} />
-              className="btn skip-link bg-light position-absolute start-0 z-3"
+      </Provider>
-              onClick={linkEvent(this, this.handleJumpToContent)}
-            >
-              {I18NextService.i18n.t("jump_to_content", "Jump to content")}
-            </button>
-            {siteView && (
-              <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(
-                  ({
-                    path,
-                    component: RouteComponent,
-                    fetchInitialData,
-                    getQueryParams,
-                  }) => (
-                    <Route
-                      key={path}
-                      path={path}
-                      exact
-                      component={routeProps => {
-                        if (!fetchInitialData) {
-                          FirstLoadService.falsify();
-                        }
-
-                        let queryProps = routeProps;
-                        if (getQueryParams && this.isoData.site_res) {
-                          // ErrorGuard will not render its children when
-                          // site_res is missing, this guarantees that props
-                          // will always contain the query params.
-                          queryProps = {
-                            ...routeProps,
-                            ...getQueryParams(
-                              routeProps.location.search,
-                              this.isoData.site_res,
-                            ),
-                          };
-                        }
-
-                        return (
-                          <ErrorGuard>
-                            <div tabIndex={-1}>
-                              {RouteComponent &&
-                                (isAuthPath(path ?? "") ? (
-                                  <AuthGuard {...routeProps}>
-                                    <RouteComponent {...queryProps} />
-                                  </AuthGuard>
-                                ) : isAnonymousPath(path ?? "") ? (
-                                  <AnonymousGuard>
-                                    <RouteComponent {...queryProps} />
-                                  </AnonymousGuard>
-                                ) : (
-                                  <RouteComponent {...queryProps} />
-                                ))}
-                            </div>
-                          </ErrorGuard>
-                        );
-                      }}
-                    />
-                  ),
-                )}
-                <Route component={ErrorPage} />
-              </Switch>
-            </div>
-            <Footer site={siteRes} />
-          </div>
-        </Provider>
-      </>
     );
   }
 }