Refactor lazy tile to not include sortable rendering

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;

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,9 +77,9 @@ function SortableTiles({ renderTile, subgroup }) {
       const disableTileGrouping =
         disableGrouping || isDragging || hasSelectedContainerGroup;
       return (
+        <LazyTile key={group.id}>
           <SortableTile
             id={group.id}
-          key={group.id}
             disableGrouping={disableTileGrouping}
             disableSorting={disableSorting}
             hidden={group.id === openGroupId}
@@ -87,6 +88,7 @@ function SortableTiles({ renderTile, subgroup }) {
           >
             {renderSortableGroup(group, selectedGroups)}
           </SortableTile>
+        </LazyTile>
       );
     });
   }

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,10 +32,7 @@ function Tile({
       }}
       onDoubleClick={onDoubleClick}
       aria-label={title}
-      ref={ref}
     >
-      {inView && (
-        <>
       <Box
         sx={{
           width: "100%",
@@ -123,8 +118,6 @@ function Tile({
           </IconButton>
         </Box>
       )}
-        </>
-      )}
     </Box>
   );
 }