Fix mobile Track/Collection skeleton margins (#10406)

AudiusProject · Nov 8, 2024 · c1d6293 · c1d6293
1 parent 353ba80
commit c1d6293
Showing 1 changed file with 52 additions and 58 deletions.
diff --git a/packages/mobile/src/components/skeletons/EntitySkeleton.tsx b/packages/mobile/src/components/skeletons/EntitySkeleton.tsx
@@ -3,7 +3,7 @@ import type { ReactNode } from 'react'
 import { times, random } from 'lodash'
 import { View } from 'react-native'
 
-import { Screen, Tile, Text, Divider, ScreenContent } from 'app/components/core'
+import { Tile, Text, Divider } from 'app/components/core'
 import Skeleton, { StaticSkeleton } from 'app/components/skeleton/Skeleton'
 import { makeStyles } from 'app/styles'
 
@@ -14,9 +14,7 @@ const messages = {
 }
 
 const useStyles = makeStyles(({ spacing, palette }) => ({
-  root: {
-    margin: spacing(3)
-  },
+  root: {},
   content: {
     paddingVertical: spacing(3) + 2,
     paddingHorizontal: spacing(4)
@@ -109,60 +107,56 @@ export const EntitySkeleton = (props: EntitySkeletonProps) => {
   const styles = useStyles()
 
   return (
-    <Screen>
-      <ScreenContent>
-        <Tile styles={{ root: styles.root, content: styles.content }}>
-          <View style={styles.heading}>
-            <Text
-              fontSize='small'
-              weight='demiBold'
-              color='neutralLight4'
-              textTransform='uppercase'
-              style={styles.headingText}
-            >
-              {entityType ? messages[entityType] : ''}
-            </Text>
-            <Skeleton style={styles.trackArtwork} />
-            <StaticSkeleton style={styles.trackTitle} />
-            <StaticSkeleton style={styles.artistName} />
-            <StaticSkeleton style={styles.playButton} />
-            <View style={styles.socialActions}>
-              <StaticSkeleton style={styles.socialAction} />
-              <StaticSkeleton style={styles.socialAction} />
-              <StaticSkeleton style={styles.socialAction} />
-              <StaticSkeleton style={styles.socialAction} />
-            </View>
-            <Divider style={styles.divider} />
-            <View style={styles.metrics}>
-              <StaticSkeleton style={styles.metric} />
-              <StaticSkeleton style={styles.metric} />
-              <StaticSkeleton style={styles.metric} />
-            </View>
-            <View style={styles.description}>
-              {times(random(5, 15), () => random(20, 100)).map(
-                (elementWidth: number, i) => (
-                  <StaticSkeleton
-                    key={i}
-                    style={[styles.descriptionText, { width: elementWidth }]}
-                  />
-                )
-              )}
-            </View>
+    <Tile styles={{ root: styles.root, content: styles.content }}>
+      <View style={styles.heading}>
+        <Text
+          fontSize='small'
+          weight='demiBold'
+          color='neutralLight4'
+          textTransform='uppercase'
+          style={styles.headingText}
+        >
+          {entityType ? messages[entityType] : ''}
+        </Text>
+        <Skeleton style={styles.trackArtwork} />
+        <StaticSkeleton style={styles.trackTitle} />
+        <StaticSkeleton style={styles.artistName} />
+        <StaticSkeleton style={styles.playButton} />
+        <View style={styles.socialActions}>
+          <StaticSkeleton style={styles.socialAction} />
+          <StaticSkeleton style={styles.socialAction} />
+          <StaticSkeleton style={styles.socialAction} />
+          <StaticSkeleton style={styles.socialAction} />
+        </View>
+        <Divider style={styles.divider} />
+        <View style={styles.metrics}>
+          <StaticSkeleton style={styles.metric} />
+          <StaticSkeleton style={styles.metric} />
+          <StaticSkeleton style={styles.metric} />
+        </View>
+        <View style={styles.description}>
+          {times(random(5, 15), () => random(20, 100)).map(
+            (elementWidth: number, i) => (
+              <StaticSkeleton
+                key={i}
+                style={[styles.descriptionText, { width: elementWidth }]}
+              />
+            )
+          )}
+        </View>
+        <Divider style={styles.divider} />
+        <View style={styles.metadataSection}>
+          <StaticSkeleton style={styles.metadata} />
+          <StaticSkeleton style={styles.metadata} />
+          <StaticSkeleton style={styles.metadata} />
+        </View>
+        {children ? (
+          <>
             <Divider style={styles.divider} />
-            <View style={styles.metadataSection}>
-              <StaticSkeleton style={styles.metadata} />
-              <StaticSkeleton style={styles.metadata} />
-              <StaticSkeleton style={styles.metadata} />
-            </View>
-            {children ? (
-              <>
-                <Divider style={styles.divider} />
-                {children}
-              </>
-            ) : null}
-          </View>
-        </Tile>
-      </ScreenContent>
-    </Screen>
+            {children}
+          </>
+        ) : null}
+      </View>
+    </Tile>
   )
 }