Added lazy loading support

src/App.js

@@ -17,7 +17,7 @@ function App() {
   function search(e) {
     setSearchQuery(e.target.value);
   }
-  // setNumberOfResults(filteredData.length);
+  
   const filteredData = data.filter((e) => {
     return (e.name.toLowerCase().includes(searchQuery.toLowerCase()) || e.title.toLowerCase().includes(searchQuery.toLowerCase()) || e.tag.toLowerCase().includes(searchQuery.toLowerCase()))
   });
@@ -44,7 +44,7 @@ function App() {
         <input className="search" type="search" placeholder="&#xf002; Search for Name / Title / Tag" onChange={search}/>
         <button className="add-btn" onClick={() => setIsAdding(true)}>&#xf067;</button>
       </div>
-      <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks found' : 'Nothing found.'}</p>
+      <p className="results">{numberOfResults > 0 ? numberOfResults + ' Bookmarks' : 'No bookmarks.'}</p>
       <List data={filteredData} reFetch={fetchData} />
       {isAdding ? <AddModal onExit={exitAdding} reFetch={fetchData} /> : null}
     </div>

src/componets/List.js

@@ -1,5 +1,6 @@
 import '../styles/List.css';
 import config from '../config.json';
+import LazyLoad from 'react-lazyload';
 
 const List = ({data, reFetch}) => {
   function deleteEntity(id) {
@@ -28,18 +29,20 @@ const List = ({data, reFetch}) => {
             try {
                 const url = new URL(e.link);
                 const favicon = 'http://www.google.com/s2/favicons?domain=' + url.hostname;
-                return <div key={i} className="list-row">
-                    <div className="img-content-grp">
-                        <img src={favicon} />
-                        <div className="list-entity-content">
-                            <div className='row-name'><span className="num">{i + 1}.</span> {e.name}</div>
-                            <div>{e.title}</div>
-                            <div><a href={e.link}>{url.hostname}</a></div>
-                            <div className="tag">{e.tag}</div>
+                return <LazyLoad key={i} height={200} offset={200}>
+                    <div className="list-row">
+                        <div className="img-content-grp">
+                            <img src={favicon} />
+                            <div className="list-entity-content">
+                                <div className='row-name'><span className="num">{i + 1}.</span> {e.name}</div>
+                                <div>{e.title}</div>
+                                <div><a href={e.link}>{url.hostname}</a></div>
+                                <div className="tag">{e.tag}</div>
+                            </div>
                         </div>
+                        <div className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</div>
                     </div>
-                    <div className="delete" onClick={() => deleteEntity(e._id)}>&#xf2ed;</div>
-                </div>
+                </LazyLoad>
             } catch (e) {
                 console.log(e);
             }

src/styles/App.css

@@ -55,6 +55,5 @@ textarea:focus, input:focus{
 }
 
 .results {  
-  margin: 20px;
-  margin-left: 30px;
+  margin: 20px 20px 20px 30px;
 }