88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { View } from "react-native";
|
|
import SkeletonPlaceholder from "react-native-skeleton-placeholder";
|
|
import Colors from "../../../../../../assets/colors/colors";
|
|
import styles from "./QuoteOfferShimmerScreenStyle";
|
|
import { StaticHeader } from "../../../../../../components/reusable/static-header/StaticHeader";
|
|
import { CtaData } from "../../../../../common/interface";
|
|
import { ConstantCta } from "../../../../../common/constants/CtaConstants";
|
|
|
|
const QuoteOfferShimmerScreen = ({
|
|
handleClick,
|
|
}: {
|
|
handleClick?: (ctaData: CtaData) => void;
|
|
}) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.header}>
|
|
<StaticHeader
|
|
handleClick={handleClick}
|
|
leftIconCta={ConstantCta.STATIC_HEADER_LEFT_ICON_CTA}
|
|
rightIconCta={ConstantCta.STATIC_HEADER_RIGHT_ICON_CTA}
|
|
/>
|
|
</View>
|
|
<ContentShimmer />
|
|
<FooterShimmer />
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default QuoteOfferShimmerScreen;
|
|
|
|
const HeaderShimmer = () => {
|
|
return (
|
|
<View style={styles.header}>
|
|
<SkeletonPlaceholder
|
|
backgroundColor={Colors.shimmerBgColor}
|
|
highlightColor={Colors.shimmerHighlightColor}
|
|
direction="right"
|
|
enabled={true}
|
|
angle={100}
|
|
borderRadius={4}
|
|
>
|
|
<View>
|
|
<View style={styles.shimmerHeaderLayout} />
|
|
</View>
|
|
</SkeletonPlaceholder>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const ContentShimmer = () => {
|
|
return (
|
|
<View style={styles.content}>
|
|
<SkeletonPlaceholder
|
|
backgroundColor={Colors.shimmerBgColor}
|
|
highlightColor={Colors.shimmerHighlightColor}
|
|
direction="right"
|
|
angle={100}
|
|
borderRadius={4}
|
|
>
|
|
<View>
|
|
<View style={styles.shimmerLayout1} />
|
|
<View style={styles.shimmerLayout2} />
|
|
<View style={styles.shimmerLayout3} />
|
|
<View style={styles.shimmerLayout4} />
|
|
</View>
|
|
</SkeletonPlaceholder>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const FooterShimmer = () => {
|
|
return (
|
|
<View style={styles.footer}>
|
|
<SkeletonPlaceholder
|
|
backgroundColor={Colors.shimmerBgColor}
|
|
highlightColor={Colors.shimmerHighlightColor}
|
|
direction="right"
|
|
angle={100}
|
|
borderRadius={4}
|
|
>
|
|
<View>
|
|
<View style={styles.shimmerFooterLayout} />
|
|
</View>
|
|
</SkeletonPlaceholder>
|
|
</View>
|
|
);
|
|
};
|