fix play new queue flickering

make icon cards look sexier

adjust artist artwork

components/Artist/component.tsx

@@ -54,6 +54,8 @@ export default function Artist(props: ArtistProps): React.JSX.Element {
                     imageStyle={{
                         width: 500,
                         height: 350,
+                        top: -width,
+                        left: width / 2,
                         resizeMode: "cover",
                         position: "relative"
                     }}

components/Global/helpers/icon-card.tsx

@@ -1,5 +1,5 @@
 import { Card, View } from "tamagui";
-import { H5, Text } from "./text";
+import { H2, H5, Text } from "./text";
 import { Colors } from "@/enums/colors";
 import Icon from "./icon";
 
@@ -8,13 +8,11 @@ export default function IconCard({
     onPress,
     width,
     caption,
-    subCaption,
  }: { 
     name: string, 
     onPress: () => void,
     width?: number | undefined,
     caption?: string | undefined,
-    subCaption?: string | undefined
 }) : React.JSX.Element {
     return (
         <View 
@@ -36,32 +34,12 @@ export default function IconCard({
                     <Icon color={Colors.Background} name={name} large />
                 </Card.Header>
                 <Card.Footer padded>
-          
+                    <H2 color={Colors.Background}>{ caption }</H2>
                 </Card.Footer>
                 <Card.Background backgroundColor={Colors.Primary}>
 
                 </Card.Background>
             </Card>
-            { caption && (
-                <View 
-                    alignContent="center"
-                    alignItems="center"
-                >
-                    <H5>
-                        { caption }
-                    </H5>
-            
-                    { subCaption && (
-                        <Text
-                            lineBreakStrategyIOS="standard"
-                            numberOfLines={1}
-                            textAlign="center"
-                        >
-                            { subCaption }
-                        </Text>
-                    )}
-                </View>
-            )}
         </View>
     )
 }

player/provider.tsx

@@ -144,6 +144,9 @@ const PlayerContextInitializer = () => {
     const usePlayNewQueue = useMutation({
         mutationFn: async (mutation: QueueMutation) => {
             trigger("impactLight");
+
+            setIsSkipping(true);
+
             // Optimistically set now playing
             setNowPlaying(mapDtoToTrack(apiClient!, sessionId, mutation.tracklist[mutation.index ?? 0], QueuingType.FromSelection));
 
@@ -155,9 +158,11 @@ const PlayerContextInitializer = () => {
             setQueueName(mutation.queueName);
         },
         onSuccess: async (data, mutation: QueueMutation) => {
+            setIsSkipping(false);
             await play(mutation.index)
         },
         onError: async () => {
+            setIsSkipping(false);
             setNowPlaying(await TrackPlayer.getActiveTrack() as JellifyTrack)
         }
     });