From 97be3b9c765ba7d63736ef4031a0ee0525b06e19 Mon Sep 17 00:00:00 2001
From: Arthur Jamet <arthur.jamet@gmail.com>
Date: Thu, 4 May 2023 11:47:29 +0100
Subject: [PATCH] Front: Play View: Fix Loading Flow

---
 front/views/PlayView.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/front/views/PlayView.tsx b/front/views/PlayView.tsx
index 7d1e527..f3a2d83 100644
--- a/front/views/PlayView.tsx
+++ b/front/views/PlayView.tsx
@@ -7,7 +7,7 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { RouteProps, useNavigation } from "../Navigation";
 import { useQuery } from 'react-query';
 import API from '../API';
-import { LoadingView } from '../components/Loading';
+import LoadingComponent, { LoadingView } from '../components/Loading';
 import Constants from 'expo-constants';
 import VirtualPiano from '../components/VirtualPiano/VirtualPiano';
 import { strToKey, keyToStr, Note } from '../models/Piano';
@@ -180,10 +180,10 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 		}
 	}, []);
 	useEffect(() => {
-		if (song.data && !webSocket.current) {
+		if (song.data && !webSocket.current && partitionRendered) {
 			navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);
 		}
-	}, [song.data]);
+	}, [song.data, partitionRendered]);
 
 	if (!song.data || !musixml.data) {
 		return <LoadingView/>;
@@ -192,6 +192,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
 		<SafeAreaView style={{ flexGrow: 1, flexDirection: 'column' }}>
 			<View style={{ flexGrow: 1, justifyContent: 'center' }}>
 				<PartitionView file={musixml.data} onPartitionReady={() => setPartitionRendered(true)} timestamp={time}/>
+				{ !partitionRendered && <LoadingComponent/> }
 			</View>
 
 			{isVirtualPianoVisible && <Column