From 3396aa25125826870284772fe0a3645b6beef10b Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 12 Dec 2022 22:42:58 +0800
Subject: [PATCH] Fix InView creating div inside ul

Make it create li but only observe one of the skeleton instead
---
 src/pages/home.jsx | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index b91616fe..db2423c0 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -174,11 +174,18 @@ export default ({ hidden }) => {
                 );
               })}
               {showMore && (
-                <InView
-                  onChange={(inView) => {
-                    if (inView) loadStatuses();
-                  }}
-                >
+                <>
+                  <InView
+                    as="li"
+                    style={{
+                      height: '20vh',
+                    }}
+                    onChange={(inView) => {
+                      if (inView) loadStatuses();
+                    }}
+                  >
+                    <Status skeleton />
+                  </InView>
                   <li
                     style={{
                       height: '25vh',
@@ -186,14 +193,7 @@ export default ({ hidden }) => {
                   >
                     <Status skeleton />
                   </li>
-                  <li
-                    style={{
-                      height: '25vh',
-                    }}
-                  >
-                    <Status skeleton />
-                  </li>
-                </InView>
+                </>
               )}
             </ul>
           </>