Bug Fix: remove react-lazyload library

Author: fmanuelos

package-lock.json

@@ -46,7 +46,6 @@
     "react-app-polyfill": "^2.0.0",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^17.0.2",
-    "react-lazyload": "^3.2.0",
     "react-paginate": "^7.1.5",
     "react-redux": "^7.2.8",
     "react-router-dom": "^5.3.3",

package.json

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Container, Row, Col, Table, Tab, Nav, Collapse} from 'react-bootstrap';
-import LazyLoad from 'react-lazyload';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus, faMinus, faAngleUp, faAngleDown, faSpinner} from '@fortawesome/free-solid-svg-icons';
-import { getHighlightObj, sortSynonyms, browserDetection } from '../../shared';
+import { faPlus, faMinus, faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import { getHighlightObj, sortSynonyms } from '../../shared';
 
 const ContainerStyled = styled(Container)`
   font-size: 1rem;
@@ -145,13 +144,6 @@ const TableStyled = styled(Table)`
   margin-bottom: 0;
 `;
 
-const RowCenter = styled(Row)`
-    height: 250px;
-    align-content: center;
-    justify-content: center;
-    color: #888;
-`;
-
 const CrossValuesTable = (props) => {
   let items = JSON.parse(JSON.stringify(props.values));
   let values = [];
@@ -427,14 +419,6 @@ const CrossValuesTable = (props) => {
     })
   });
 
-  const PlaceholderComponent = () => {
-    return (<Col sm={12}>
-        <RowCenter>
-          <FontAwesomeIcon icon={faSpinner} spin size="2x"/>
-        </RowCenter>
-      </Col>);
-  }
-
   const TableSynonyms = (props) => {
     if (props.synonyms !== undefined) {
       return props.synonyms.map((item, index) =>
@@ -785,14 +769,6 @@ const CrossValuesTable = (props) => {
     );
   }
 
-  const LazyLoadContainer = (props) => {
-    return (
-      <LazyLoad height={250} once overflow={true} offset={270} key={props.index} placeholder={<PlaceholderComponent />} classNamePrefix="lazyload-cross">
-        {props.children}
-      </LazyLoad>
-    );
-  }
-
   if (crossValues.length !== 0) {
     return (
       <ContainerStyled>
@@ -815,22 +791,11 @@ const CrossValuesTable = (props) => {
           </Col>
         </TableThead>
         <TableBody>
-          {(crossValues.length < 25 || browserDetection.isEdge)
-          ? 
           <Col xs={12}>
             {crossValues.map((cross, index) => 
               <ValuesItemsContainer cross={cross} key={index} />
             )}
           </Col>
-          :
-          <Col xs={12}>
-            {crossValues.map((cross, index) => 
-              <LazyLoadContainer key={index}>
-                <ValuesItemsContainer cross={cross} key={index}/>
-              </LazyLoadContainer>
-            )}
-          </Col>
-          }
         </TableBody>
       </ContainerStyled>
     );

src/pages/Search/CrossValuesTable.js

@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Container, Row, Col, Table, Tab, Nav, Collapse} from 'react-bootstrap';
-import LazyLoad from 'react-lazyload';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus, faMinus, faAngleUp, faAngleDown, faSpinner} from '@fortawesome/free-solid-svg-icons';
-import { getHighlightObj, sortAlphabetically, sortSynonyms, browserDetection } from '../../shared';
+import { faPlus, faMinus, faAngleUp, faAngleDown} from '@fortawesome/free-solid-svg-icons';
+import { getHighlightObj, sortAlphabetically, sortSynonyms } from '../../shared';
 
 const ContainerStyled = styled(Container)`
   font-size: 1rem;
@@ -105,14 +104,6 @@ const IndicatorContent = styled.div`
   transform: translateY(-50%);
 `;
 
-const RowCenter = styled(Row)`
-    height: 180px;
-    align-content: center;
-    justify-content: center;
-    color: #888;
-`;
-
-
 const GDCValuesTable = (props) => {
   let items = JSON.parse(JSON.stringify(props.values));
   let values = [];
@@ -210,14 +201,6 @@ const GDCValuesTable = (props) => {
     }
   });
 
-  const PlaceholderComponent = () => {
-    return (<Col sm={12}>
-        <RowCenter>
-          <FontAwesomeIcon icon={faSpinner} spin size="2x"/>
-        </RowCenter>
-      </Col>);
-  }
-
   const TableSynonyms = (props) => {
     if (props.synonyms !== undefined) {
       return props.synonyms.map((item, index) =>
@@ -495,14 +478,6 @@ const GDCValuesTable = (props) => {
     );
   }
 
-  const LazyLoadContainer = (props) => {
-    return (
-      <LazyLoad height={180} once overflow={true} offset={200} key={props.index} placeholder={<PlaceholderComponent />} classNamePrefix="lazyload-gdc">
-        {props.children}
-      </LazyLoad>
-    );
-  }
-
   if (values.length !== 0) {
     return (
     <ContainerStyled>
@@ -515,22 +490,11 @@ const GDCValuesTable = (props) => {
         </Col>
       </TableThead>
       <TableBody>
-        {(values.length < 6 || browserDetection.isEdge)
-          ? 
-          <Col xs={12}>
-            {values.map((item, index) => 
-              <ValueItem item={item} key={index} />
-            )}
-          </Col>
-          :
-          <Col xs={12}>
-            {values.map((item, index) => 
-              <LazyLoadContainer key={index}>
-                <ValueItem item={item} key={index}/>
-              </LazyLoadContainer>
-            )}
-          </Col>
-        }
+        <Col xs={12}>
+          {values.map((item, index) => 
+            <ValueItem item={item} key={index} />
+          )}
+        </Col>
       </TableBody>
     </ContainerStyled>
     );