Fix: Remove UserListSkeletonView

Author: truph01

src/components/OptionsListSkeletonView.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Circle, Rect} from 'react-native-svg';
+import useThemeStyles from '@hooks/useThemeStyles';
 import ItemListSkeletonView from './Skeletons/ItemListSkeletonView';
 
 function getLinedWidth(index: number): string {
@@ -17,9 +18,40 @@ function getLinedWidth(index: number): string {
 
 type OptionsListSkeletonViewProps = {
     shouldAnimate?: boolean;
+    isUserList?: boolean;
 };
 
-function OptionsListSkeletonView({shouldAnimate = true}: OptionsListSkeletonViewProps) {
+function OptionsListSkeletonView({shouldAnimate = true, isUserList = false}: OptionsListSkeletonViewProps) {
+    const styles = useThemeStyles();
+    if (isUserList) {
+        return (
+            <ItemListSkeletonView
+                shouldAnimate={shouldAnimate}
+                itemViewStyle={[styles.highlightBG, styles.mb3, styles.mh5, styles.br2]}
+                renderSkeletonItem={() => (
+                    <>
+                        <Circle
+                            cx="40"
+                            cy="32"
+                            r="20"
+                        />
+                        <Rect
+                            x="72"
+                            y="18"
+                            width="20%"
+                            height="8"
+                        />
+                        <Rect
+                            x="72"
+                            y="38"
+                            width="10%"
+                            height="8"
+                        />
+                    </>
+                )}
+            />
+        );
+    }
     return (
         <ItemListSkeletonView
             shouldAnimate={shouldAnimate}

src/components/SelectionList/BaseSelectionList.tsx

@@ -36,7 +36,7 @@ function BaseSelectionList<TItem extends ListItem>(
     {
         sections,
         ListItem,
-        SkeletonView,
+        shouldUseUserSkeletonView,
         canSelectMultiple = false,
         onSelectRow,
         shouldDebounceRowSelect = false,
@@ -629,8 +629,6 @@ function BaseSelectionList<TItem extends ListItem>(
         },
     );
 
-    const getSkeletonView = useCallback(() => (SkeletonView ? <SkeletonView shouldAnimate /> : <OptionsListSkeletonView shouldAnimate />), [SkeletonView]);
-
     return (
         <SafeAreaConsumer>
             {({safeAreaPaddingBottomStyle}) => (
@@ -683,7 +681,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     )}
                     {!!headerContent && headerContent}
                     {flattenedSections.allOptions.length === 0 && showLoadingPlaceholder ? (
-                        getSkeletonView()
+                        <OptionsListSkeletonView isUserList={shouldUseUserSkeletonView} />
                     ) : (
                         <>
                             {!listHeaderContent && header()}

src/components/SelectionList/types.ts

@@ -271,7 +271,7 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Default renderer for every item in the list */
     ListItem: ValidListItem;
 
-    SkeletonView?: React.FC<SkeletonViewProps>;
+    shouldUseUserSkeletonView?: boolean;
 
     /** Whether this is a multi-select list */
     canSelectMultiple?: boolean;

src/components/UserListSkeletonView.tsx

@@ -21,7 +21,6 @@ import SelectionList from '@components/SelectionList';
 import TableListItem from '@components/SelectionList/TableListItem';
 import type {ListItem, SelectionListHandle} from '@components/SelectionList/types';
 import Text from '@components/Text';
-import UserListSkeletonView from '@components/UserListSkeletonView';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
@@ -568,7 +567,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
                         canSelectMultiple={isPolicyAdmin}
                         sections={[{data, isDisabled: false}]}
                         ListItem={TableListItem}
-                        SkeletonView={UserListSkeletonView}
+                        shouldUseUserSkeletonView
                         disableKeyboardShortcuts={removeMembersConfirmModalVisible}
                         headerMessage={getHeaderMessage()}
                         headerContent={!isSmallScreenWidth && getHeaderContent()}