Revert "Remove delay between page loading and being blurred"

This reverts commit 5197206.
LemmyNet · Apr 18, 2024 · 8e5599e · 8e5599e
1 parent bbce909
commit 8e5599e
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 110 deletions.
diff --git a/lemmy-translations b/lemmy-translations
diff --git a/src/client/index.tsx b/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";

diff --git a/src/server/handlers/catch-all-handler.tsx b/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,

diff --git a/src/shared/components/app/app.tsx b/src/shared/components/app/app.tsx
@@ -1,11 +1,5 @@
 import { isAnonymousPath, isAuthPath, setIsoData } from "@utils/app";
-import {
-  Component,
-  RefObject,
-  createRef,
-  forwardRef,
-  linkEvent,
-} from "inferno";
+import { Component, createRef, linkEvent } from "inferno";
 import { Provider } from "inferno-i18next-dess";
 import { Route, Switch } from "inferno-router";
 import { IsoDataOptionalSite } from "../../interfaces";
@@ -22,99 +16,9 @@ import AnonymousGuard from "../common/anonymous-guard";
 import { destroyTippy, setupTippy } from "../../tippy";
 import AdultConsentModal from "../common/adult-consent-modal";
 
-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> {
+export class App extends Component<any, any> {
   private isoData: IsoDataOptionalSite = setIsoData(this.context);
+  private readonly mainContentRef = createRef<HTMLElement>();
   private readonly rootRef = createRef<HTMLDivElement>();
 
   componentDidMount(): void {
@@ -125,17 +29,96 @@ export default class AppWrapper extends Component<any, any> {
     destroyTippy();
   }
 
+  handleJumpToContent(event) {
+    event.preventDefault();
+    this.mainContentRef.current?.focus();
+  }
+
   render() {
-    const contentWarning =
-      this.isoData.site_res?.site_view.site.content_warning;
+    const siteRes = this.isoData.site_res;
+    const siteView = siteRes?.site_view;
 
     return (
-      <Provider i18next={I18NextService.i18n}>
-        {contentWarning && (
-          <AdultConsentModal contentWarning={contentWarning} />
-        )}
-        <AppForwardRef ref={this.rootRef} />
-      </Provider>
+      <>
+        <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)}
+            >
+              {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>
+      </>
     );
   }
 }