fix: avoid empty placeholder flashing

petyosi · Aug 17, 2022 · fe55e3f · fe55e3f
1 parent aab06cf
commit fe55e3f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/examples/chat.tsx b/examples/chat.tsx
@@ -71,10 +71,11 @@ function ChatList({ userId, messages = [], onSend, onReceive, placeholder }: Cha
   }
 
   const row = React.useMemo(
-    () => (i: number, { message, id }: { message: string; id: string }) => {
-      const fromUser = id === userId
-      return <Bubble key={i} fromUser={fromUser} text={message} />
-    },
+    () =>
+      (i: number, { message, id }: { message: string; id: string }) => {
+        const fromUser = id === userId
+        return <Bubble key={i} fromUser={fromUser} text={message} />
+      },
     [userId]
   )
 
@@ -127,7 +128,7 @@ function ChatList({ userId, messages = [], onSend, onReceive, placeholder }: Cha
 }
 
 const data = Array.from({ length: 130 }, (_) => ({
-  id: faker.random.number({ min: 1, max: 2 }).toString(),
+  id: faker.datatype.number({ min: 1, max: 2 }).toString(),
   message: faker.lorem.sentences(),
 }))
 

diff --git a/examples/empty-placeholder.tsx b/examples/empty-placeholder.tsx
@@ -10,12 +10,16 @@ export default function App() {
       <Virtuoso
         computeItemKey={(key) => `item-${key}`}
         components={{
-          EmptyPlaceholder: () => <div>Nothing to See here!</div>,
+          EmptyPlaceholder: () => {
+            console.log('empty placeholder rendered')
+            return <div>Nothing to See here!</div>
+          },
         }}
         totalCount={totalCount}
         itemContent={(index) => <div style={{ height: 30 }}>Item {index}</div>}
         style={{ height: 300 }}
       />
+      <p>Empty placeholder should not be flashed in default rendering. check the console for logs.</p>
     </div>
   )
 }
diff --git a/src/listStateSystem.ts b/src/listStateSystem.ts
@@ -191,7 +191,7 @@ export const listStateSystem = u.system(
             const { sizeTree, offsetTree } = sizesValue
 
             if (totalCount === 0 || (startOffset === 0 && endOffset === 0)) {
-              return EMPTY_LIST_STATE
+              return { ...EMPTY_LIST_STATE, totalCount }
             }
 
             if (empty(sizeTree)) {