OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Move our loadable wrapper into util

Browse source 
I wanna use it for other loadables, too!
This commit is contained in:
Emi Matchu 2021-01-21 14:27:05 -08:00
parent 2946126d38
commit ffc697b241
2 changed files with 29 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/app/App.js
View file

@ -9,7 +9,6 @@ import {
Route, Route,
useLocation, useLocation,
} from "react-router-dom"; } from "react-router-dom";
import loadable from "@loadable/component";
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing"; import { Integrations } from "@sentry/tracing";
import { useAuth0 } from "@auth0/auth0-react"; import { useAuth0 } from "@auth0/auth0-react";
@ -17,34 +16,23 @@ import { useAuth0 } from "@auth0/auth0-react";
import buildApolloClient from "./apolloClient"; import buildApolloClient from "./apolloClient";
import PageLayout from "./PageLayout"; import PageLayout from "./PageLayout";
import WardrobePageLayout from "./WardrobePage/WardrobePageLayout"; import WardrobePageLayout from "./WardrobePage/WardrobePageLayout";
import { loadable } from "./util";
// Loading the page will often fail after a deploy, because Vercel doesn't keep const ConversionPage = loadable(() => import("./ConversionPage"));
// old JS chunks on the CDN. Recover by reloading! const HomePage = loadable(() => import("./HomePage"));
const tryLoadable = (load, options) => const ItemSearchPage = loadable(() => import("./ItemSearchPage"));
loadable( const ItemPage = loadable(() => import("./ItemPage"));
() => const ItemTradesOfferingPage = loadable(() =>
load().catch((e) => {
console.error("Error loading page, reloading", e);
window.location.reload();
}),
options
);
const ConversionPage = tryLoadable(() => import("./ConversionPage"));
const HomePage = tryLoadable(() => import("./HomePage"));
const ItemSearchPage = tryLoadable(() => import("./ItemSearchPage"));
const ItemPage = tryLoadable(() => import("./ItemPage"));
const ItemTradesOfferingPage = tryLoadable(() =>
import("./ItemTradesPage").then((m) => m.ItemTradesOfferingPage) import("./ItemTradesPage").then((m) => m.ItemTradesOfferingPage)
); );
const ItemTradesSeekingPage = tryLoadable(() => const ItemTradesSeekingPage = loadable(() =>
import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage) import("./ItemTradesPage").then((m) => m.ItemTradesSeekingPage)
); );
const ModelingPage = tryLoadable(() => import("./ModelingPage")); const ModelingPage = loadable(() => import("./ModelingPage"));
const PrivacyPolicyPage = tryLoadable(() => import("./PrivacyPolicyPage")); const PrivacyPolicyPage = loadable(() => import("./PrivacyPolicyPage"));
const UserItemsPage = tryLoadable(() => import("./UserItemsPage")); const UserItemsPage = loadable(() => import("./UserItemsPage"));
const UserOutfitsPage = tryLoadable(() => import("./UserOutfitsPage")); const UserOutfitsPage = loadable(() => import("./UserOutfitsPage"));
const WardrobePage = tryLoadable(() => import("./WardrobePage"), { const WardrobePage = loadable(() => import("./WardrobePage"), {
fallback: <WardrobePageLayout />, fallback: <WardrobePageLayout />,
}); });

17
src/app/util.js
View file

@ -1,5 +1,6 @@
import React from "react"; import React from "react";
import { Box, Heading, useColorModeValue } from "@chakra-ui/react"; import { Box, Heading, useColorModeValue } from "@chakra-ui/react";
import loadableLibrary from "@loadable/component";
/** /**
* Delay hides its content at first, then shows it after the given delay. * Delay hides its content at first, then shows it after the given delay.
@ -293,3 +294,19 @@ export function loadImage({ src, crossOrigin = null }) {
}; };
return promise; return promise;
} }
/**
* loadable is a wrapper for `@loadable/component`, with extra error handling.
* Loading the page will often fail if you keep a session open during a deploy,
* because Vercel doesn't keep old JS chunks on the CDN. Recover by reloading!
*/
export function loadable(load, options) {
return loadableLibrary(
() =>
load().catch((e) => {
console.error("Error loading page, reloading", e);
window.location.reload();
}),
options
);
}