optimize dom elements

package.json

@@ -39,6 +39,7 @@
     "promise.allsettled": "^1.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-intersection-observer": "^8.29.0",
     "sass": "^1.26.8",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.2.1",

serverSide/routing/index.js

@@ -9,7 +9,7 @@ const mapAandValidateData = (response = []) => {
     const mapSet = {};
     return response.reduce((result, item) => {
         if (item.status === 'fulfilled') {
-            const { url = '', file = '', image = '', fileSizeBytes= 0 } = item.value;
+            const { url = '', file = '', image = '', fileSizeBytes= 0 } = item && item.value || {};
             console.log(item);
             const imageUrl = url || file || image;
             if (hasValidImage(imageUrl) && !mapSet[imageUrl]) {

src/components/Page/Page.tsx

@@ -0,0 +1,16 @@
+
+import * as React from "react";
+import { useInView } from "react-intersection-observer";
+
+export const Page = (props) => {
+    const { ref, inView } = useInView({
+      threshold: 0,
+    });
+    const className = 'Pages';
+    return (
+      <ul key={props.id} ref={ref} className={className}>
+        {inView && props.items}
+        {!inView && <div style={{ height: "1000px" }}> </div>}
+      </ul>
+    );
+  }

src/components/Page/PageList.tsx

@@ -0,0 +1,42 @@
+
+import * as React from "react";
+import { Image } from "../image";
+import { Page } from './Page';
+
+const MAX_IMAGES_PER_PAGE = 20;
+
+export const PageList = (props) => {
+    const renderImageList = (images) => {
+        const pages = [];
+        if (images.length < MAX_IMAGES_PER_PAGE) {
+            const page = images.map((image, index) => {
+                return <Image {...image} key={index} />;
+            });
+            return <Page items={page} id={0} key={0} />;
+        }
+
+        let count = 0;
+        let id = 0;
+        let list = [];
+        for (let index = 0; index < images.length; index++) {
+            const image = images[index];
+            const imageEl = <Image {...image} key={index} />;
+            list.push(imageEl);
+            count++;
+            if (count === MAX_IMAGES_PER_PAGE) {
+                const p = <Page items={list} id={id} key={id} />;
+                id++;
+                pages.push(p);
+                count = 0;
+                list = [];
+            }
+        }
+        return pages;
+    };
+
+    return (
+        <>
+            {renderImageList(props.images)}
+        </>
+    );
+}

src/components/appStyle.scss

@@ -11,7 +11,7 @@
         margin: 8px;
         border-radius: 50%;
         border: 6px solid #fff;
-        border-color:#000 transparent #000;
+        border-color: #000 transparent #000;
         animation: lds-dual-ring 1.2s linear infinite;
     }
 }
@@ -25,8 +25,62 @@
         transform: rotate(360deg);
     }
 }
+
 .LoadingInfo {
     display: flex;
     justify-content: center;
     margin: 30px;
+}
+
+
+ul {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+li {
+    height: 40vh;
+    flex-grow: 1;
+}
+
+li:last-child {
+    flex-grow: 10;
+}
+
+img {
+    max-height: 100%;
+    min-width: 100%;
+    object-fit: cover;
+    vertical-align: bottom;
+}
+
+@media (max-aspect-ratio: 1/1) {
+    li {
+        height: 30vh;
+    }
+}
+
+
+@media (max-height: 480px) {
+    li {
+        height: 80vh;
+    }
+}
+
+
+@media (max-aspect-ratio: 1/1) and (max-width: 480px) {
+    ul {
+        flex-direction: row;
+    }
+
+    li {
+        height: auto;
+        width: 100%;
+    }
+
+    img {
+        width: 100%;
+        max-height: 75vh;
+        min-width: 0;
+    }
 }

src/components/image.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { useInView } from "react-intersection-observer";
+interface Props {
+    url: string;
+}
+
+const placeHoledrImage =
+    "https://media.giphy.com/media/l0dJ49ChzUuKU8Ampv/giphy.gif";
+
+export const Image: React.FC<Props> = React.memo((props) => {
+    let observer = null;
+    let element = null;
+    React.useEffect(() => {
+      observer = new IntersectionObserver(
+        (entries) => {
+          entries &&
+            entries.forEach((entry) => {
+              const { isIntersecting } = entry;
+              if (isIntersecting && element) {
+                element.src = props.url;
+              } else {
+                if (element) {
+                  element.src = placeHoledrImage;
+                }
+              }
+            });
+        },
+        {
+          root: window.document.body,
+          rootMargin: "0px 0px 200px 0px",
+        }
+      );
+      observer.observe(element);
+      return () => (observer = observer.disconnect());
+    }, []);
+
+    return (
+        <li>
+            <img
+                ref={(el) => (element = el)}
+                src={placeHoledrImage}
+            />
+        </li>
+    );
+});

src/components/infinitRenderStyle.scss

@@ -1,123 +1,48 @@
-.ImageContiner {
-    display: flex;
-    justify-content: center;
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
 }
-
-img {
-    height: 250px;
-    width: 350px;
-    margin: 5px;
-    border-radius: 10px;
-}
-
 body {
-    background: aliceblue;
+	line-height: 1;
 }
-
-@media only screen and (max-width: 600px) {
-
-
-    .InfinitRender {
-        width: 100%;
-        margin: 5px;
-    }
-
-    img {
-        height: 350px;
-        width: 100%;
-        margin: 5px;
-        border-radius: 10px;
-    }
-
-    .InfinitRender__continer {
-        display: grid;
-        grid-template-columns: repeat(1, 1fr);
-        grid-gap: 5px;
-    }
-
+ol, ul {
+	list-style: none;
 }
-
-@media only screen and (min-width: 600px) {
-
-    .InfinitRender {
-        width: 100%;
-        margin: 5px;
-    }
-
-    img {
-        height: 350px;
-        width: 100%;
-        margin: 5px;
-        border-radius: 10px;
-    }
-
-    .InfinitRender__continer {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        grid-gap: 5px;
-    }
-
+blockquote, q {
+	quotes: none;
 }
-
-@media only screen and (min-width: 768px) {
-
-    .InfinitRender {
-        width: 100%;
-        margin: 5px;
-    }
-
-    img {
-        height: 350px;
-        width: 100%;
-        margin: 5px;
-        border-radius: 10px;
-    }
-
-    .InfinitRender__continer {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-gap: 5px;
-    }
-
-}
-
-
-@media only screen and (min-width: 1200px) {
-
-    .InfinitRender {
-        width: 100%;
-        margin: 5px;
-    }
-
-    img {
-        height: 350px;
-        width: 100%;
-        margin: 5px;
-        border-radius: 10px;
-    }
-
-    .InfinitRender__continer {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        grid-gap: 5px;
-    }
-
-}
-
-.loader {
-    display: flex;
-    margin: auto;
-}
-
-.img-hover-zoom {
-    height: 360px;
-    overflow: hidden;
-}
-
-.img-hover-zoom img {
-    transition: transform .9s ease;
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
 }
-
-.img-hover-zoom:hover img {
-    transform: scale(1.1);
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
 }