Add lazy loading for tiles and token bar tokens
This commit is contained in:
parent
f0d93abd31
commit
53be182b1c
@ -27,6 +27,7 @@
|
||||
"file-saver": "^2.0.5",
|
||||
"fuse.js": "^6.4.6",
|
||||
"image-outline": "^0.1.0",
|
||||
"intersection-observer": "^0.12.0",
|
||||
"konva": "^7.2.5",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.get": "^4.4.2",
|
||||
@ -39,6 +40,7 @@
|
||||
"raw.macro": "^0.4.2",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-intersection-observer": "^8.32.0",
|
||||
"react-konva": "^17.0.1-3",
|
||||
"react-markdown": "4",
|
||||
"react-media": "^2.0.0-rc.1",
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from "react";
|
||||
import { Flex, IconButton, Box, Text, Badge } from "theme-ui";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
import EditTileIcon from "../../icons/EditTileIcon";
|
||||
|
||||
@ -14,6 +15,8 @@ function Tile({
|
||||
editTitle,
|
||||
children,
|
||||
}) {
|
||||
const [ref, inView] = useInView({ triggerOnce: true });
|
||||
|
||||
return (
|
||||
<Flex
|
||||
sx={{
|
||||
@ -34,7 +37,10 @@ function Tile({
|
||||
}}
|
||||
onDoubleClick={onDoubleClick}
|
||||
aria-label={title}
|
||||
ref={ref}
|
||||
>
|
||||
{inView && (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
@ -120,6 +126,8 @@ function Tile({
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
@ -1,20 +1,17 @@
|
||||
import React, { useRef } from "react";
|
||||
import React from "react";
|
||||
import { Box } from "theme-ui";
|
||||
|
||||
import usePreventTouch from "../../hooks/usePreventTouch";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
|
||||
import TokenImage from "./TokenImage";
|
||||
|
||||
function TokenBarToken({ token }) {
|
||||
const imageRef = useRef();
|
||||
// Stop touch to prevent 3d touch gesutre on iOS
|
||||
usePreventTouch(imageRef);
|
||||
const [ref, inView] = useInView({ triggerOnce: true });
|
||||
|
||||
return (
|
||||
<Box my={1} sx={{ width: "48px", height: "48px" }} title={token.name}>
|
||||
<Box ref={ref} sx={{ width: "48px", height: "48px" }} title={token.name}>
|
||||
{inView && (
|
||||
<TokenImage
|
||||
token={token}
|
||||
ref={imageRef}
|
||||
sx={{
|
||||
userSelect: "none",
|
||||
touchAction: "none",
|
||||
@ -26,6 +23,7 @@ function TokenBarToken({ token }) {
|
||||
alt={token.name}
|
||||
title={token.name}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
@ -16,6 +16,11 @@ if (!("PointerEvent" in window)) {
|
||||
import("pepjs");
|
||||
}
|
||||
|
||||
// Intersection observer polyfill
|
||||
if (!("IntersectionObserver" in window)) {
|
||||
import("intersection-observer");
|
||||
}
|
||||
|
||||
if (process.env.REACT_APP_LOGGING === "true") {
|
||||
Sentry.init({
|
||||
dsn: process.env.REACT_APP_SENTRY_DSN,
|
||||
|
10
yarn.lock
10
yarn.lock
@ -7317,6 +7317,11 @@ internal-slot@^1.0.2:
|
||||
has "^1.0.3"
|
||||
side-channel "^1.0.2"
|
||||
|
||||
intersection-observer@^0.12.0:
|
||||
version "0.12.0"
|
||||
resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa"
|
||||
integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==
|
||||
|
||||
invariant@^2.2.2:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
@ -10857,6 +10862,11 @@ react-input-autosize@^3.0.0:
|
||||
dependencies:
|
||||
prop-types "^15.5.8"
|
||||
|
||||
react-intersection-observer@^8.32.0:
|
||||
version "8.32.0"
|
||||
resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-8.32.0.tgz#47249332e12e8bb99ed35a10bb7dd10446445a7b"
|
||||
integrity sha512-RlC6FvS3MFShxTn4FHAy904bVjX5Nn4/eTjUkurW0fHK+M/fyQdXuyCy9+L7yjA+YMGogzzSJNc7M4UtfSKvtw==
|
||||
|
||||
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
|
Loading…
Reference in New Issue
Block a user