bugfix: [Collect] Fix image lazy load

artsy · Jun 11, 2021 · 4e221b5 · 4e221b5
1 parent e79f1be
commit 4e221b5
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 72 deletions.
diff --git a/src/v2/Components/ArtworkGrid/ArtworkGrid.tsx b/src/v2/Components/ArtworkGrid/ArtworkGrid.tsx
@@ -48,7 +48,6 @@ export class ArtworkGridContainer extends React.Component<
     columnCount: [3],
     sectionMargin: 20,
     itemMargin: 20,
-    preloadImageCount: 6,
   }
 
   state = {
@@ -108,7 +107,7 @@ export class ArtworkGridContainer extends React.Component<
     columnCount: number,
     sectionedArtworks: SectionedArtworks
   ) {
-    const { contextModule, preloadImageCount } = this.props
+    const { contextModule } = this.props
     const spacerStyle = {
       height: this.props.itemMargin,
     }
@@ -133,8 +132,6 @@ export class ArtworkGridContainer extends React.Component<
             artwork={artwork}
             key={artwork.id}
             mediator={this.props.mediator}
-            // @ts-expect-error STRICT_NULL_CHECK
-            lazyLoad={artworkIndex >= preloadImageCount}
             onClick={() => {
               if (this.props.onBrickClick) {
                 this.props.onBrickClick(artwork, artworkIndex)

diff --git a/src/v2/Components/ArtworkGrid/__tests__/ArtworkGrid.jest.tsx b/src/v2/Components/ArtworkGrid/__tests__/ArtworkGrid.jest.tsx
@@ -6,7 +6,7 @@ import { cloneDeep } from "lodash"
 import React from "react"
 import { createFragmentContainer, graphql } from "react-relay"
 import { ExtractProps } from "v2/Utils/ExtractProps"
-import GridItem, { ArtworkGridItem } from "../../Artwork/GridItem"
+import { ArtworkGridItem } from "../../Artwork/GridItem"
 import { ArtworkGridFixture } from "./ArtworkGridFixture"
 import ArtworkGrid, {
   ArtworkGridContainer,
@@ -202,24 +202,5 @@ describe("ArtworkGrid", () => {
       expect(wrapper.text()).toMatch(ArtworkGridFixture.edges[0].node.title)
       expect(wrapper.find(ArtworkGridItem).length).toBe(4)
     })
-
-    it("Should preload same number of images as specified in preloadImageCount", async () => {
-      const wrapper = await getRelayWrapper({
-        preloadImageCount: 2,
-        columnCount: 2,
-        ...props,
-      })
-
-      // DOM order looks like:
-      // |0|2| - preload
-      // |1|3| - lazyload
-
-      const gridItems = wrapper.find(GridItem)
-
-      expect(gridItems.get(0).props.lazyLoad).toBe(false)
-      expect(gridItems.get(1).props.lazyLoad).toBe(true)
-      expect(gridItems.get(2).props.lazyLoad).toBe(false)
-      expect(gridItems.get(3).props.lazyLoad).toBe(true)
-    })
   })
 })
diff --git a/src/v2/Components/ImageLink.tsx b/src/v2/Components/ImageLink.tsx
@@ -1,50 +1,9 @@
-import { Box, ResponsiveImage, SerifProps } from "@artsy/palette"
+import { Box, Image, SerifProps } from "@artsy/palette"
 import { RouterLink } from "v2/Artsy/Router/RouterLink"
 import React, { FC } from "react"
 import styled from "styled-components"
-import { space } from "styled-system"
 import { Media } from "v2/Utils/Responsive"
 
-const ImageContainer = styled(Box)`
-  position: relative;
-`
-
-const HubImage = styled(ResponsiveImage)`
-  vertical-align: middle;
-`
-
-const ImageOverlay = styled(Box)`
-  &::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: none;
-    color: #fff;
-    content: "";
-    background: rgba(0, 0, 0, 0.3);
-  }
-`
-
-const OuterLink = styled(RouterLink)`
-  text-decoration: none;
-
-  &:hover {
-    .title {
-      text-decoration: underline;
-    }
-
-    ${ImageOverlay} {
-      &::before {
-        display: block;
-      }
-    }
-  }
-
-  ${space}
-`
-
 interface ImageLinkProps {
   /** Source url for the image */
   src: string
@@ -64,6 +23,12 @@ interface ImageLinkProps {
   onClick?: () => void
 }
 
+const ImageContainer = styled(Box)`
+  &:hover {
+    opacity: 0.9;
+  }
+`
+
 export const ImageLink: FC<ImageLinkProps> = ({
   to,
   src,
@@ -73,11 +38,9 @@ export const ImageLink: FC<ImageLinkProps> = ({
   onClick,
 }) => {
   return (
-    <OuterLink to={to} onClick={onClick}>
-      <ImageContainer>
-        <ImageOverlay>
-          <HubImage src={src} width="100%" ratio={ratio} lazyLoad />
-        </ImageOverlay>
+    <RouterLink to={to} onClick={onClick}>
+      <ImageContainer height={130}>
+        <Image src={src} height={130} lazyLoad style={{ objectFit: "cover" }} />
       </ImageContainer>
       {React.cloneElement(title, {
         // kind of like "default props" for a cloned element.
@@ -95,6 +58,6 @@ export const ImageLink: FC<ImageLinkProps> = ({
             textAlign: "center",
           })}
       </Media>
-    </OuterLink>
+    </RouterLink>
   )
 }