Fix: Implement skeleton view in workspace member page

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,12 +18,16 @@ function getLinedWidth(index: number): string {
 
 type OptionsListSkeletonViewProps = {
     shouldAnimate?: boolean;
+    shouldStyleAsTable?: boolean;
 };
 
-function OptionsListSkeletonView({shouldAnimate = true}: OptionsListSkeletonViewProps) {
+function OptionsListSkeletonView({shouldAnimate = true, shouldStyleAsTable = false}: OptionsListSkeletonViewProps) {
+    const styles = useThemeStyles();
+
     return (
         <ItemListSkeletonView
             shouldAnimate={shouldAnimate}
+            itemViewStyle={shouldStyleAsTable && [styles.highlightBG, styles.mb3, styles.mh5, styles.br2]}
             renderSkeletonItem={({itemIndex}) => {
                 const lineWidth = getLinedWidth(itemIndex);
 
@@ -42,7 +47,7 @@ function OptionsListSkeletonView({shouldAnimate = true}: OptionsListSkeletonView
                         <Rect
                             x="72"
                             y="38"
-                            width={lineWidth}
+                            width={shouldStyleAsTable ? '10%' : lineWidth}
                             height="8"
                         />
                     </>

src/components/SelectionList/BaseSelectionList.tsx

@@ -36,6 +36,7 @@ function BaseSelectionList<TItem extends ListItem>(
     {
         sections,
         ListItem,
+        shouldUseUserSkeletonView,
         canSelectMultiple = false,
         onSelectRow,
         shouldDebounceRowSelect = false,
@@ -680,7 +681,7 @@ function BaseSelectionList<TItem extends ListItem>(
                     )}
                     {!!headerContent && headerContent}
                     {flattenedSections.allOptions.length === 0 && showLoadingPlaceholder ? (
-                        <OptionsListSkeletonView shouldAnimate />
+                        <OptionsListSkeletonView shouldStyleAsTable={shouldUseUserSkeletonView} />
                     ) : (
                         <>
                             {!listHeaderContent && header()}

src/components/SelectionList/types.ts

@@ -260,13 +260,19 @@ type SectionWithIndexOffset<TItem extends ListItem> = Section<TItem> & {
     indexOffset?: number;
 };
 
+type SkeletonViewProps = {
+    shouldAnimate: boolean;
+};
+
 type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Sections for the section list */
     sections: Array<SectionListDataType<TItem>> | typeof CONST.EMPTY_ARRAY;
 
     /** Default renderer for every item in the list */
     ListItem: ValidListItem;
 
+    shouldUseUserSkeletonView?: boolean;
+
     /** Whether this is a multi-select list */
     canSelectMultiple?: boolean;
 
@@ -485,6 +491,7 @@ export type {
     ReportListItemProps,
     ReportListItemType,
     Section,
+    SkeletonViewProps,
     SectionListDataType,
     SectionWithIndexOffset,
     SelectionListHandle,

src/pages/workspace/WorkspaceMembersPage.tsx

@@ -567,6 +567,7 @@ function WorkspaceMembersPage({personalDetails, invitedEmailsToAccountIDsDraft,
                         canSelectMultiple={isPolicyAdmin}
                         sections={[{data, isDisabled: false}]}
                         ListItem={TableListItem}
+                        shouldUseUserSkeletonView
                         disableKeyboardShortcuts={removeMembersConfirmModalVisible}
                         headerMessage={getHeaderMessage()}
                         headerContent={!isSmallScreenWidth && getHeaderContent()}