Add lazy loading for tiles and token bar tokens

package.json

@@ -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",

src/components/tile/Tile.js

@@ -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
+      {inView && (
-        sx={{
+        <>
-          width: "100%",
+          <Box
-          height: "100%",
+            sx={{
-          position: "absolute",
+              width: "100%",
-          top: 0,
+              height: "100%",
-          left: 0,
+              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();
             }}
-            bg="overlay"
-            sx={{ borderRadius: "50%" }}
-            m={2}
           >
-            <EditTileIcon />
+            {children}
-          </IconButton>
+          </Box>
-        </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>
   );

src/components/token/TokenBarToken.js

@@ -1,31 +1,29 @@
-import React, { useRef } from "react";
+import React from "react";
 import { Box } from "theme-ui";
-
+import { useInView } from "react-intersection-observer";
-import usePreventTouch from "../../hooks/usePreventTouch";
 
 import TokenImage from "./TokenImage";
 
 function TokenBarToken({ token }) {
-  const imageRef = useRef();
+  const [ref, inView] = useInView({ triggerOnce: true });
-  // Stop touch to prevent 3d touch gesutre on iOS
-  usePreventTouch(imageRef);
 
   return (
-    <Box my={1} sx={{ width: "48px", height: "48px" }} title={token.name}>
+    <Box ref={ref} sx={{ width: "48px", height: "48px" }} title={token.name}>
-      <TokenImage
+      {inView && (
-        token={token}
+        <TokenImage
-        ref={imageRef}
+          token={token}
-        sx={{
+          sx={{
-          userSelect: "none",
+            userSelect: "none",
-          touchAction: "none",
+            touchAction: "none",
-          width: "100%",
+            width: "100%",
-          height: "100%",
+            height: "100%",
-          objectFit: "cover",
+            objectFit: "cover",
-          pointerEvents: "none",
+            pointerEvents: "none",
-        }}
+          }}
-        alt={token.name}
+          alt={token.name}
-        title={token.name}
+          title={token.name}
-      />
+        />
+      )}
     </Box>
   );
 }

src/index.js

@@ -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,

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"