From 5e69ffcef8496ba3ab71b2e2b733e4dd1b64967d Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Fri, 18 Jun 2021 10:48:52 +1000
Subject: [PATCH] Refactor lazy tile to not include sortable rendering

---
 src/components/tile/LazyTile.js      |  33 ++++++
 src/components/tile/SortableTiles.js |  24 ++--
 src/components/tile/Tile.js          | 169 +++++++++++++--------------
 3 files changed, 127 insertions(+), 99 deletions(-)
 create mode 100644 src/components/tile/LazyTile.js

diff --git a/src/components/tile/LazyTile.js b/src/components/tile/LazyTile.js
new file mode 100644
index 0000000..54eaa06
--- /dev/null
+++ b/src/components/tile/LazyTile.js
@@ -0,0 +1,33 @@
+import React from "react";
+import { Box } from "theme-ui";
+import { useInView } from "react-intersection-observer";
+
+function LazyTile({ children }) {
+  const [ref, inView] = useInView({ triggerOnce: false });
+
+  const sx = inView
+    ? {}
+    : { width: "100%", height: "0", paddingTop: "100%", position: "relative" };
+
+  return (
+    <Box sx={sx} ref={ref}>
+      {inView ? (
+        children
+      ) : (
+        <Box
+          sx={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderRadius: "4px",
+          }}
+          bg="background"
+        />
+      )}
+    </Box>
+  );
+}
+
+export default LazyTile;
diff --git a/src/components/tile/SortableTiles.js b/src/components/tile/SortableTiles.js
index 404102f..a42bfbd 100644
--- a/src/components/tile/SortableTiles.js
+++ b/src/components/tile/SortableTiles.js
@@ -5,6 +5,7 @@ import { moveGroupsInto } from "../../helpers/group";
 import { keyBy } from "../../helpers/shared";
 
 import SortableTile from "./SortableTile";
+import LazyTile from "./LazyTile";
 
 import {
   useTileDragId,
@@ -76,17 +77,18 @@ function SortableTiles({ renderTile, subgroup }) {
       const disableTileGrouping =
         disableGrouping || isDragging || hasSelectedContainerGroup;
       return (
-        <SortableTile
-          id={group.id}
-          key={group.id}
-          disableGrouping={disableTileGrouping}
-          disableSorting={disableSorting}
-          hidden={group.id === openGroupId}
-          isDragging={isDragging}
-          cursor={dragCursor}
-        >
-          {renderSortableGroup(group, selectedGroups)}
-        </SortableTile>
+        <LazyTile key={group.id}>
+          <SortableTile
+            id={group.id}
+            disableGrouping={disableTileGrouping}
+            disableSorting={disableSorting}
+            hidden={group.id === openGroupId}
+            isDragging={isDragging}
+            cursor={dragCursor}
+          >
+            {renderSortableGroup(group, selectedGroups)}
+          </SortableTile>
+        </LazyTile>
       );
     });
   }
diff --git a/src/components/tile/Tile.js b/src/components/tile/Tile.js
index 115a648..c550657 100644
--- a/src/components/tile/Tile.js
+++ b/src/components/tile/Tile.js
@@ -1,6 +1,5 @@
 import React from "react";
 import { Flex, IconButton, Box, Text, Badge } from "theme-ui";
-import { useInView } from "react-intersection-observer";
 
 import EditTileIcon from "../../icons/EditTileIcon";
 
@@ -15,7 +14,6 @@ function Tile({
   editTitle,
   children,
 }) {
-  const [ref, inView] = useInView({ triggerOnce: true });
   return (
     <Box
       sx={{
@@ -34,96 +32,91 @@ function Tile({
       }}
       onDoubleClick={onDoubleClick}
       aria-label={title}
-      ref={ref}
     >
-      {inView && (
-        <>
-          <Box
-            sx={{
-              width: "100%",
-              height: "100%",
-              position: "absolute",
-              top: 0,
-              left: 0,
-            }}
+      <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" }}
           >
-            {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",
+            {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();
             }}
-            p={2}
+            bg="overlay"
+            sx={{ borderRadius: "50%" }}
+            m={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>
-          )}
-        </>
+            <EditTileIcon />
+          </IconButton>
+        </Box>
       )}
     </Box>
   );