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

Revert "Remove delay between page loading and being blurred"

Browse source 
This reverts commit 51972060a7.
This commit is contained in:
Matthias Camenzind 2024-04-18 13:18:36 +02:00
parent bbce9096f6
commit 8e5599e3a9
4 changed files with 93 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lemmy-translations

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

2
src/client/index.tsx
View file

@ -1,7 +1,7 @@
import { initializeSite } from "@utils/app"; import { initializeSite } from "@utils/app";
import { hydrate } from "inferno-hydrate"; import { hydrate } from "inferno-hydrate";
import { BrowserRouter } from "inferno-router"; 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 { lazyHighlightjs } from "../shared/lazy-highlightjs";
import { loadUserLanguage } from "../shared/services/I18NextService"; import { loadUserLanguage } from "../shared/services/I18NextService";
import { verifyDynamicImports } from "../shared/dynamic-imports"; import { verifyDynamicImports } from "../shared/dynamic-imports";

2
src/server/handlers/catch-all-handler.tsx
View file

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

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

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