Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | 2x | import NoResultsState from "@common/EmptyState/NoResultsState";
import LoadingSpinner from "@components/Snipper/LoadingSpinner";
import ListWrapperWithStates from "@containers/ListWrapperWithStates";
import { TListWrapperSection } from "@containers/types";
import { Box, SxProps } from "@mui/material";
import { useAppSelector } from "@redux/hooks";
import { selectQueryString } from "@redux/slices/search";
import { isMobile } from "@utils/index";
import React, { memo } from "react";
type MobileListWithStatesProps = {
queryKey: string;
length?: number;
targetRef?: any;
children: React.ReactNode;
isLoading: boolean;
sx?: SxProps;
LoadingSkeleton?: React.ComponentType;
loadingSkeletonProps?: any;
emptyState?: TListWrapperSection;
};
const MobileListWithStates = ({
queryKey,
length,
targetRef,
children,
isLoading,
sx,
LoadingSkeleton,
emptyState,
loadingSkeletonProps,
}: MobileListWithStatesProps) => {
const searchQuery = useAppSelector((state) =>
selectQueryString(state, queryKey),
);
if (!isLoading && !length) {
return (
<ListWrapperWithStates
section={emptyState}
isEmpty={emptyState && !searchQuery}
action={null}
>
<NoResultsState searchQuery={searchQuery} />
</ListWrapperWithStates>
);
}
const isCustomLoadingComponent = !!LoadingSkeleton;
return (
<>
<Box
display="flex"
width="100%"
flexDirection="column"
sx={{
paddingBottom: "24px",
...sx,
}}
>
{children}
{isLoading && (
<>
{isCustomLoadingComponent ? (
<>
{Array(7)
.fill(null)
.map((c, idx) => (
<LoadingSkeleton key={idx} {...loadingSkeletonProps} />
))}
</>
) : (
<LoadingSpinner sx={{ height: "100px" }} />
)}
</>
)}
</Box>
{length && isMobile ? (
<div
ref={targetRef}
style={{
width: 1,
height: 1,
paddingBottom: 48,
visibility: "hidden",
}}
></div>
) : null}
</>
);
};
export default memo(MobileListWithStates);
|