🎈 perf(购物页面): 改善滚动列表的加载

src/pages/shopping/index.tsx

@@ -1,7 +1,7 @@
 import Search from '@/components/search'
 import { View } from '@tarojs/components'
 import Taro, { useDidShow } from '@tarojs/taro'
-import { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { FC, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useTransition } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import IconText from '@/components/iconText'
@@ -15,6 +15,7 @@ import { dataLoadingStatus, debounce, getFilterData } from '@/common/util'
 import { ShoppingProvider } from './components/shoppingCart/index'
 import { Goods, ShoppingDispatchType, useShoppingDispatch, useShoppingState } from './context'
 import { alert, goLink, isEmptyObject } from '@/common/common'
+import LoadingCard from '@/components/loadingCard'
 
 export const Shopping: FC = memo(() => {
   // 计算总的预估金额
@@ -87,7 +88,9 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
 
   //数据加载状态
   const statusMore = useMemo(() => {
-    return dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading })
+    const status = dataLoadingStatus({ list: shoppingCartData.list, total: shoppingCartData.total, status: state.loading })
+    console.log('status==>', status)
+    return status
   }, [shoppingCartData, state])
 
   // useLayoutEffect 执行在DOM更新之后，浏览器绘制之前 如果放在 useEffect 里面会产生多一次不必要的回流和重绘，可能会引起视图闪现
@@ -112,8 +115,12 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
     })()
   }, [])
 
+  const [isPending, startTransition] = useTransition()
+
   useEffect(() => {
-    setShoppingCartData({ list: state.data, total: state.data.length })
+    startTransition(() => {
+      setShoppingCartData({ list: state.data, total: state.data.length })
+    })
   }, [state])
 
   // 结算
@@ -228,10 +235,14 @@ const ShoppingCartContainer: FC<InternalContainer> = () => {
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
         <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeightRef.current }}>
           <InfiniteScroll statusMore={statusMore} refresherEnabled={true} selfOnRefresherRefresh={handleRefresh} refresherTriggered={refreshStatus}>
-            {!!shoppingCartData?.list?.length &&
+            {isPending ? (
+              <LoadingCard />
+            ) : (
+              !!shoppingCartData?.list?.length &&
               shoppingCartData?.list?.map((item, index) => {
                 return <ItemList itemData={item} key={index}></ItemList>
-              })}
+              })
+            )}
           </InfiniteScroll>
         </View>
       </View>