Add lazy loading for tiles and token bar tokens
This commit is contained in:
Mitchell McCaffrey
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,91 +37,96 @@ function Tile({
|
||||
}}
|
||||
onDoubleClick={onDoubleClick}
|
||||
aria-label={title}
|
||||
ref={ref}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background:
|
||||
"linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
p={2}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
variant="heading"
|
||||
color="hsl(210, 50%, 96%)"
|
||||
sx={{ textAlign: "center" }}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderColor: "primary",
|
||||
borderStyle: isSelected ? "solid" : "none",
|
||||
borderWidth: "4px",
|
||||
pointerEvents: "none",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "6px",
|
||||
left: "6px",
|
||||
}}
|
||||
>
|
||||
{badges.map((badge, i) => (
|
||||
<Badge
|
||||
m="2px"
|
||||
key={i}
|
||||
bg="overlay"
|
||||
color="text"
|
||||
sx={{ width: "fit-content" }}
|
||||
>
|
||||
{badge}
|
||||
</Badge>
|
||||
))}
|
||||
</Flex>
|
||||
{canEdit && (
|
||||
<Box sx={{ position: "absolute", top: 0, right: 0 }}>
|
||||
<IconButton
|
||||
aria-label={editTitle}
|
||||
title={editTitle}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
{inView && (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
bg="overlay"
|
||||
sx={{ borderRadius: "50%" }}
|
||||
m={2}
|
||||
>
|
||||
<EditTileIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
{children}
|
||||
</Box>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
background:
|
||||
"linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.65) 100%);",
|
||||
alignItems: "flex-end",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
p={2}
|
||||
>
|
||||
<Text
|
||||
as="p"
|
||||
variant="heading"
|
||||
color="hsl(210, 50%, 96%)"
|
||||
sx={{ textAlign: "center" }}
|
||||
>
|
||||
{title}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderColor: "primary",
|
||||
borderStyle: isSelected ? "solid" : "none",
|
||||
borderWidth: "4px",
|
||||
pointerEvents: "none",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
<Flex
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "6px",
|
||||
left: "6px",
|
||||
}}
|
||||
>
|
||||
{badges.map((badge, i) => (
|
||||
<Badge
|
||||
m="2px"
|
||||
key={i}
|
||||
bg="overlay"
|
||||
color="text"
|
||||
sx={{ width: "fit-content" }}
|
||||
>
|
||||
{badge}
|
||||
</Badge>
|
||||
))}
|
||||
</Flex>
|
||||
{canEdit && (
|
||||
<Box sx={{ position: "absolute", top: 0, right: 0 }}>
|
||||
<IconButton
|
||||
aria-label={editTitle}
|
||||
title={editTitle}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEdit();
|
||||
}}
|
||||
bg="overlay"
|
||||
sx={{ borderRadius: "50%" }}
|
||||
m={2}
|
||||
>
|
||||
<EditTileIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
|
||||
@ -1,31 +1,29 @@
|
||||
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}>
|
||||
<TokenImage
|
||||
token={token}
|
||||
ref={imageRef}
|
||||
sx={{
|
||||
userSelect: "none",
|
||||
touchAction: "none",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
alt={token.name}
|
||||
title={token.name}
|
||||
/>
|
||||
<Box ref={ref} sx={{ width: "48px", height: "48px" }} title={token.name}>
|
||||
{inView && (
|
||||
<TokenImage
|
||||
token={token}
|
||||
sx={{
|
||||
userSelect: "none",
|
||||
touchAction: "none",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
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