update app/components/VbeSkeleton.js

Strides-SPAPP/app/components/VbeSkeleton.js

@@ -9,7 +9,9 @@ const VbeSkeleton = ({
   height=16,
   margin={},
   borderRadius=8,
-  animate=true
+  animate=true,
+  isLoading=true,
+  children
 }) => {
   const opacity = useRef(new Animated.Value(1)).current;
   useEffect(() => {
@@ -45,26 +47,30 @@ const VbeSkeleton = ({
     });
   }
   
-  if (layout.length > 0) {
-    return (
-      <Animated.View style={[style, {opacity}]}>
-        { layout.map((item, index) =>
-          <View key={index} style={{height, borderRadius: borderRadius, backgroundColor: color, ...item}}>
-            
-          </View>
-        )}
-      </Animated.View>
-    )
-  } else {
-    return (
-      <Animated.View style={[style, {opacity}]}>
-        { widthList.map((item, index) => 
-          <View key={index} style={{width: item, height, ...margin, borderRadius: borderRadius, backgroundColor: color ?? VbeTheme.getSkeletonColor()}}>
-            
-          </View>
-        )}
-      </Animated.View>
-    );
+  if (isLoading) {
+    if (layout.length > 0) {
+      return (
+        <Animated.View style={[style, {opacity}]}>
+          { layout.map((item, index) =>
+            <View key={index} style={{height, borderRadius: borderRadius, backgroundColor: color, ...item}}>
+              
+            </View>
+          )}
+        </Animated.View>
+      )
+    } else {
+      return (
+        <Animated.View style={[style, {opacity}]}>
+          { widthList.map((item, index) => 
+            <View key={index} style={{width: item, height, ...margin, borderRadius: borderRadius, backgroundColor: color ?? VbeTheme.getSkeletonColor()}}>
+              
+            </View>
+          )}
+        </Animated.View>
+      );
+    }
+  } else if (children) {
+    return children;
   }
 };