From 4562a33926a7674cded530fec50a21fc0b305a5c Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 15 Jun 2021 16:24:16 +0800
Subject: [PATCH] Lazy-load homepage categories

---
 ui/page/home/view.jsx | 71 ++++++++++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/ui/page/home/view.jsx b/ui/page/home/view.jsx
index 1c2c1b10e..0ccbf65d4 100644
--- a/ui/page/home/view.jsx
+++ b/ui/page/home/view.jsx
@@ -6,9 +6,11 @@ import React from 'react';
 import Page from 'component/page';
 import Button from 'component/button';
 import ClaimTilesDiscover from 'component/claimTilesDiscover';
+import ClaimPreviewTile from 'component/claimPreviewTile';
 import Icon from 'component/common/icon';
 import I18nMessage from 'component/i18nMessage';
 import LbcSymbol from 'component/common/lbc-symbol';
+import WaitUntilOnPage from 'component/common/wait-until-on-page';
 import useGetLivestreams from 'effects/use-get-livestreams';
 
 type Props = {
@@ -37,6 +39,48 @@ function HomePage(props: Props) {
     showNsfw
   );
 
+  function getRowElements(title, route, link, icon, help, options, index) {
+    const tilePlaceholder = (
+      <ul className="claim-grid">
+        {new Array(options.pageSize || 8).fill(1).map((x, i) => (
+          <ClaimPreviewTile key={i} placeholder />
+        ))}
+      </ul>
+    );
+    const claimTiles = <ClaimTilesDiscover {...options} liveLivestreamsFirst livestreamMap={livestreamMap} hasSource />;
+
+    return (
+      <div key={title} className="claim-grid__wrapper">
+        {index !== 0 && title && typeof title === 'string' && (
+          <h1 className="claim-grid__header">
+            <Button navigate={route || link} button="link">
+              {icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
+              <span className="claim-grid__title">{__(title)}</span>
+              {help}
+            </Button>
+          </h1>
+        )}
+
+        {index === 0 && <>{claimTiles}</>}
+        {index !== 0 && (
+          <WaitUntilOnPage name={title} placeholder={tilePlaceholder}>
+            {claimTiles}
+          </WaitUntilOnPage>
+        )}
+
+        {(route || link) && (
+          <Button
+            className="claim-grid__title--secondary"
+            button="link"
+            navigate={route || link}
+            iconRight={ICONS.ARROW_RIGHT}
+            label={__('View More')}
+          />
+        )}
+      </div>
+    );
+  }
+
   return (
     <Page fullWidthPage>
       {IS_WEB && DOMAIN === 'lbry.tv' && (
@@ -81,30 +125,9 @@ function HomePage(props: Props) {
           </p>
         </div>
       )}
-      {rowData.map(({ title, route, link, icon, help, options = {} }, index) => (
-        <div key={title} className="claim-grid__wrapper">
-          {index !== 0 && title && typeof title === 'string' && (
-            <h1 className="claim-grid__header">
-              <Button navigate={route || link} button="link">
-                {icon && <Icon className="claim-grid__header-icon" sectionIcon icon={icon} size={20} />}
-                <span className="claim-grid__title">{__(title)}</span>
-                {help}
-              </Button>
-            </h1>
-          )}
-
-          <ClaimTilesDiscover {...options} liveLivestreamsFirst livestreamMap={livestreamMap} hasSource />
-          {(route || link) && (
-            <Button
-              className="claim-grid__title--secondary"
-              button="link"
-              navigate={route || link}
-              iconRight={ICONS.ARROW_RIGHT}
-              label={__('View More')}
-            />
-          )}
-        </div>
-      ))}
+      {rowData.map(({ title, route, link, icon, help, options = {} }, index) => {
+        return getRowElements(title, route, link, icon, help, options, index);
+      })}
     </Page>
   );
 }