60 lines
1.3 KiB
TypeScript
60 lines
1.3 KiB
TypeScript
// components/CustomSkeleton.tsx
|
|
import React from "react";
|
|
import { View, StyleProp, ViewStyle, DimensionValue } from "react-native";
|
|
import { MotiView } from "moti";
|
|
import { AccentColor, MainColor } from "@/constants/color-palet";
|
|
|
|
interface CustomSkeletonProps {
|
|
isLoading?: boolean;
|
|
style?: StyleProp<ViewStyle>;
|
|
width?: DimensionValue;
|
|
height?: DimensionValue;
|
|
radius?: number;
|
|
}
|
|
|
|
const CustomSkeleton: React.FC<CustomSkeletonProps> = ({
|
|
isLoading = true,
|
|
style,
|
|
width = "100%",
|
|
height = 16,
|
|
radius = 8,
|
|
}) => {
|
|
if (!isLoading) return null;
|
|
|
|
return (
|
|
<View
|
|
style={[
|
|
{
|
|
width,
|
|
height,
|
|
borderRadius: radius,
|
|
backgroundColor: AccentColor.darkblue,
|
|
overflow: "hidden",
|
|
position: "relative",
|
|
},
|
|
style,
|
|
]}
|
|
>
|
|
<MotiView
|
|
from={{ translateY: -100 }}
|
|
animate={{ translateY: 100 }}
|
|
transition={{
|
|
duration: 1200,
|
|
repeat: Infinity,
|
|
type: "timing",
|
|
}}
|
|
style={{
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
height: 100,
|
|
backgroundColor: MainColor.soft_darkblue,
|
|
borderRadius: 4,
|
|
}}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default CustomSkeleton;
|