[Add] lazy load component

Author: HikaruEgashira

package-lock.json

@@ -27,7 +27,8 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
-    "react-image-lightbox": "^5.1.1"
+    "react-image-lightbox": "^5.1.1",
+    "react-lazyload": "^2.6.7"
   },
   "devDependencies": {
     "eslint-config-prettier": "^6.10.0",

package.json

@@ -4,6 +4,7 @@ import "./index.scss"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faSearch, faTimes, faFilter } from "@fortawesome/free-solid-svg-icons"
 import { activityTypes, normalizeActivityType } from "../lib/normalize"
+import LazyLoad from "react-lazyload"
 
 import Layout from "../components/layout"
 import Fluid200 from "../components/Fluid200"
@@ -194,33 +195,35 @@ const IndexPage = () => {
             <ul className="org-list">
               {filteredOrgs.map(({ node: org }) => (
                 <li className="org-list__item" key={org.primaryKey}>
-                  <Link to={`/org/${org.primaryKey}`}>
-                    <figure className="org-list__item__poster">
-                      <Fluid200 url={org.posterImageUrls[0]} alt="" />
-                      <figcaption>
-                        <h2 className="org-list__item__name">{org.name}</h2>
-                        <p className="org-list__item__activity-introduce">
-                          {org.activityIntroduce.slice(0, 100) + "..."}
-                        </p>
-                      </figcaption>
-                    </figure>
-                  </Link>
-
-                  <div // スマホ用
-                    className="org-list__item__sp-caption"
-                    onClick={() => {
-                      if (lastTouchedItem === org.primaryKey)
-                        navigate(`/org/${org.primaryKey}`)
-                      setLastTouchedItem(org.primaryKey)
-                    }}
-                  >
-                    <div className="org-list__item__sp-caption__name">
-                      {org.name}
-                    </div>
-                    <div className="org-list__item__sp-caption__activity-introduce">
-                      {org.activityIntroduce.slice(0, 100) + "..."}
+                  <LazyLoad offset={200} once>
+                    <Link to={`/org/${org.primaryKey}`}>
+                      <figure className="org-list__item__poster">
+                        <Fluid200 url={org.posterImageUrls[0]} alt="" />
+                        <figcaption>
+                          <h2 className="org-list__item__name">{org.name}</h2>
+                          <p className="org-list__item__activity-introduce">
+                            {org.activityIntroduce.slice(0, 100) + "..."}
+                          </p>
+                        </figcaption>
+                      </figure>
+                    </Link>
+
+                    <div // スマホ用
+                      className="org-list__item__sp-caption"
+                      onClick={() => {
+                        if (lastTouchedItem === org.primaryKey)
+                          navigate(`/org/${org.primaryKey}`)
+                        setLastTouchedItem(org.primaryKey)
+                      }}
+                    >
+                      <div className="org-list__item__sp-caption__name">
+                        {org.name}
+                      </div>
+                      <div className="org-list__item__sp-caption__activity-introduce">
+                        {org.activityIntroduce.slice(0, 100) + "..."}
+                      </div>
                     </div>
-                  </div>
+                  </LazyLoad>
                 </li>
               ))}
             </ul>