Merge pull request #43652 from truph01/fix/43395-search-mobile-loading-indicator

Feat: Implement loading skeleton small screen width

Author: luacmartins

src/CONST.ts

@@ -1250,6 +1250,7 @@ const CONST = {
     },
     CENTRAL_PANE_ANIMATION_HEIGHT: 200,
     LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
+    SEARCH_SKELETON_VIEW_ITEM_HEIGHT: 108,
     EXPENSIFY_PARTNER_NAME: 'expensify.com',
     EMAIL: {
         ACCOUNTING: 'accounting@expensify.com',

src/components/Skeletons/ItemListSkeletonView.tsx

@@ -1,5 +1,6 @@
 import React, {useMemo, useState} from 'react';
 import {View} from 'react-native';
+import type {StyleProp, ViewStyle} from 'react-native';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -9,9 +10,11 @@ type ListItemSkeletonProps = {
     shouldAnimate?: boolean;
     renderSkeletonItem: (args: {itemIndex: number}) => React.ReactNode;
     fixedNumItems?: number;
+    itemViewStyle?: StyleProp<ViewStyle>;
+    itemViewHeight?: number;
 };
 
-function ItemListSkeletonView({shouldAnimate = true, renderSkeletonItem, fixedNumItems}: ListItemSkeletonProps) {
+function ItemListSkeletonView({shouldAnimate = true, renderSkeletonItem, fixedNumItems, itemViewStyle = {}, itemViewHeight = CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}: ListItemSkeletonProps) {
     const theme = useTheme();
     const themeStyles = useThemeStyles();
 
@@ -20,20 +23,23 @@ function ItemListSkeletonView({shouldAnimate = true, renderSkeletonItem, fixedNu
         const items = [];
         for (let i = 0; i < numItems; i++) {
             items.push(
-                <SkeletonViewContentLoader
+                <View
                     key={`skeletonViewItems${i}`}
-                    animate={shouldAnimate}
-                    height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}
-                    backgroundColor={theme.skeletonLHNIn}
-                    foregroundColor={theme.skeletonLHNOut}
-                    style={themeStyles.mr5}
+                    style={[themeStyles.mr5, itemViewStyle]}
                 >
-                    {renderSkeletonItem({itemIndex: i})}
-                </SkeletonViewContentLoader>,
+                    <SkeletonViewContentLoader
+                        animate={shouldAnimate}
+                        height={itemViewHeight}
+                        backgroundColor={theme.skeletonLHNIn}
+                        foregroundColor={theme.skeletonLHNOut}
+                    >
+                        {renderSkeletonItem({itemIndex: i})}
+                    </SkeletonViewContentLoader>
+                </View>,
             );
         }
         return items;
-    }, [numItems, shouldAnimate, theme, themeStyles, renderSkeletonItem]);
+    }, [numItems, shouldAnimate, theme, themeStyles, renderSkeletonItem, itemViewHeight, itemViewStyle]);
 
     return (
         <View
@@ -43,7 +49,7 @@ function ItemListSkeletonView({shouldAnimate = true, renderSkeletonItem, fixedNu
                     return;
                 }
 
-                const newNumItems = Math.ceil(event.nativeEvent.layout.height / CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT);
+                const newNumItems = Math.ceil(event.nativeEvent.layout.height / itemViewHeight);
                 if (newNumItems === numItems) {
                     return;
                 }

src/components/Skeletons/TableListItemSkeleton.tsx

@@ -1,5 +1,8 @@
 import React from 'react';
-import {Rect} from 'react-native-svg';
+import {Circle, Rect} from 'react-native-svg';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import CONST from '@src/CONST';
 import ItemListSkeletonView from './ItemListSkeletonView';
 
 type TableListItemSkeletonProps = {
@@ -12,6 +15,87 @@ const shortBarWidth = '40';
 const longBarWidth = '120';
 
 function TableListItemSkeleton({shouldAnimate = true, fixedNumItems}: TableListItemSkeletonProps) {
+    const styles = useThemeStyles();
+    const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
+    if (isSmallScreenWidth) {
+        return (
+            <ItemListSkeletonView
+                itemViewHeight={CONST.SEARCH_SKELETON_VIEW_ITEM_HEIGHT}
+                itemViewStyle={[styles.highlightBG, styles.mb3, styles.br3, styles.mr3, styles.ml3]}
+                shouldAnimate={shouldAnimate}
+                fixedNumItems={fixedNumItems}
+                renderSkeletonItem={() => (
+                    <>
+                        <Circle
+                            cx={24}
+                            cy={26}
+                            r={8}
+                        />
+
+                        <Rect
+                            x={40}
+                            y={24}
+                            width={40}
+                            height={4}
+                        />
+                        <Circle
+                            cx={96}
+                            cy={26}
+                            r={8}
+                        />
+
+                        <Rect
+                            x={112}
+                            y={24}
+                            width={40}
+                            height={4}
+                        />
+                        <Rect
+                            x={windowWidth - 120}
+                            y={12}
+                            width={80}
+                            height={28}
+                            rx={14}
+                            ry={14}
+                        />
+
+                        <Rect
+                            x={16}
+                            y={56}
+                            width={36}
+                            height={40}
+                            rx={4}
+                            ry={4}
+                        />
+                        <Rect
+                            x={64}
+                            y={65}
+                            width={124}
+                            height={8}
+                        />
+                        <Rect
+                            x={64}
+                            y={79}
+                            width={60}
+                            height={8}
+                        />
+                        <Rect
+                            x={windowWidth - 120}
+                            y={65}
+                            width={80}
+                            height={8}
+                        />
+                        <Rect
+                            x={windowWidth - 100}
+                            y={79}
+                            width={60}
+                            height={8}
+                        />
+                    </>
+                )}
+            />
+        );
+    }
     return (
         <ItemListSkeletonView
             shouldAnimate={shouldAnimate}