[Add] feed image lazy loading #32

client/src/composition/Feed/ImageContainer.tsx

@@ -1,34 +1,61 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Image } from 'react-components.d';
 import { Carousel } from 'react-responsive-carousel';
 import 'style/carousel.css';
+import useIntersect from 'hooks/useIntersectObserver';
+import { useCallback } from 'react';
+import styled from 'styled-components';
 
+const FaceImageContainer = styled.div`
+  width: 480px;
+  height: 500px;
+  background: ${props => props.theme.colors.borderColor};
+  border-radius: 2px;
+`;
 interface IProps {
   images: (Image | null)[];
   width: string;
   height: string;
 }
-
+const EMPTY_URL = 'Empty';
 function ImageContainer({ images, width, height }: IProps) {
+  const [imageUrl, setImageUrl] = useState<string[]>([]); //fake image
+  const setImages = useCallback(() => {
+    const imagelist: string[] = images.map(image => {
+      return image && image.url ? image.url : EMPTY_URL;
+    });
+    setImageUrl(imagelist);
+  }, [images]);
+
+  const [, setRef] = useIntersect(setImages, () => {}, { threshold: 0.1 });
   if (!images) return <></>;
 
   return (
     <>
-      <Carousel
-        autoPlay
-        dynamicHeight={true}
-        showThumbs={false}
-        showStatus={false}>
-        {images.map((image, idx) =>
-          image && image.url ? (
-            <div key={idx + image.url}>
-              <img style={{ width, height }} src={image.url} alt={image.url} />
-            </div>
-          ) : (
-            <></>
-          )
-        )}
-      </Carousel>
+      {imageUrl && imageUrl.length === 0 ? (
+        <FaceImageContainer ref={setRef as any}></FaceImageContainer>
+      ) : (
+        <Carousel
+          autoPlay
+          dynamicHeight={true}
+          showThumbs={false}
+          showStatus={false}>
+          {images.map((image, idx) =>
+            image && image.url ? (
+              <div key={idx + image.url}>
+                <img
+                  style={{ width, height }}
+                  src={imageUrl[idx]}
+                  data-src={image.url}
+                  alt={image.url}
+                />
+              </div>
+            ) : (
+              <></>
+            )
+          )}
+        </Carousel>
+      )}
     </>
   );
 }

client/src/hooks/useIntersectObserver.tsx

@@ -10,14 +10,14 @@ const baseOption = {
 const useIntersect = (
   interSectAction: any,
   outerSectAction: any,
-  option: any
+  option: any = baseOption
 ) => {
   const [ref, setRef] = useState(null);
 
   const checkIntersect = useCallback(
-    (entry: IntersectionObserverEntry[]) => {
+    (entry: IntersectionObserverEntry[], observer) => {
       if (entry[0].isIntersecting) {
-        interSectAction();
+        interSectAction(entry[0], observer);
       } else {
         outerSectAction();
       }
@@ -29,7 +29,7 @@ const useIntersect = (
     let observer: any;
 
     if (ref) {
-      observer = new IntersectionObserver(checkIntersect, baseOption);
+      observer = new IntersectionObserver(checkIntersect, option);
       observer.observe(ref);
     }
     return () => observer && observer.disconnect();