skeleton ui implemented for home's header chips

Author: gauravxdev

Component/Discover/ShowPlaylistofType.jsx

@@ -14,6 +14,7 @@ import { PlaylistItemWrapper } from "./PlaylistItemWrapper";
 import { CommonActions } from "@react-navigation/native";
 import { CacheManager } from '../../Utils/NavigationCacheManager';
 import { CACHE_TTL, CACHE_KEYS, generateCacheKey } from '../../Utils/CacheConfig';
+import { GridSkeleton } from "../Global/GridSkeleton";
 
 // Add a utility function to truncate text
 const truncateText = (text, limit = 22) => {
@@ -30,7 +31,7 @@ export default function ShowPlaylistofType({ route }) {
   const currentRoute = useRoute();
   const limit = 30;
   const [Data, setData] = useState({});
-  const [Loading, setLoading] = useState(false);
+  const [Loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [fetchError, setFetchError] = useState(null);
   const [source, setSource] = useState(null);
@@ -214,17 +215,9 @@ export default function ShowPlaylistofType({ route }) {
         <Heading text={(Searchtext || 'Popular Playlists').toUpperCase()} />
       </PaddingConatiner>
 
-      {/* Improved loading state */}
+      {/* Improved loading state - Skeleton UI */}
       {Loading && (
-        <View style={{
-          flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
-          height: 300
-        }}>
-          <ActivityIndicator size="large" color="#1DB954" />
-          <PlainText text={`Loading ${Searchtext || 'playlist'} data...`} style={{ marginTop: 10 }} />
-        </View>
+        <GridSkeleton count={8} showHeader={false} noScroll={true} />
       )}
 
       {/* Error state */}

Component/Global/GridSkeleton.jsx

@@ -7,8 +7,11 @@ const { width: SCREEN_WIDTH } = Dimensions.get('window');
 /**
  * GridSkeleton - Skeleton UI for grid layouts (Albums, Playlists, etc.)
  * Renders a 2-column grid of square cards
+ * @param {number} count - Number of skeleton cards to show
+ * @param {boolean} showHeader - Whether to show header skeleton
+ * @param {boolean} noScroll - If true, renders without ScrollView wrapper (for use inside other scroll containers)
  */
-export const GridSkeleton = ({ count = 6, showHeader = false }) => {
+export const GridSkeleton = ({ count = 6, showHeader = false, noScroll = false }) => {
     const { dark } = useTheme();
     const shimmerAnim = useRef(new Animated.Value(0)).current;
 
@@ -70,12 +73,8 @@ export const GridSkeleton = ({ count = 6, showHeader = false }) => {
         </View>
     );
 
-    return (
-        <ScrollView
-            style={styles.container}
-            showsVerticalScrollIndicator={false}
-            contentContainerStyle={styles.contentContainer}
-        >
+    const content = (
+        <>
             {showHeader && (
                 <View style={styles.headerInfo}>
                     <Animated.View
@@ -94,6 +93,24 @@ export const GridSkeleton = ({ count = 6, showHeader = false }) => {
                     <GridCardSkeleton key={index} />
                 ))}
             </View>
+        </>
+    );
+
+    if (noScroll) {
+        return (
+            <View style={styles.noScrollContainer}>
+                {content}
+            </View>
+        );
+    }
+
+    return (
+        <ScrollView
+            style={styles.container}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={styles.contentContainer}
+        >
+            {content}
         </ScrollView>
     );
 };
@@ -102,6 +119,10 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
     },
+    noScrollContainer: {
+        flex: 1,
+        paddingHorizontal: 8,
+    },
     contentContainer: {
         paddingBottom: 100,
         paddingHorizontal: 8,