Front: LoadingView Component

front/Navigation.tsx

@@ -14,8 +14,7 @@ import { useQuery } from 'react-query';
 import API from './API';
 import PlayView from './views/PlayView';
 import ScoreView from './views/ScoreView';
-import { Center } from 'native-base';
-import LoadingComponent from './components/Loading';
+import { LoadingView } from './components/Loading';
 import ProfileView from './views/ProfileView';
 import useColorScheme from './hooks/colorScheme';
 
@@ -81,11 +80,7 @@ export const Router = () => {
 		}>
 			<Stack.Navigator>
 				{ userProfile.isLoading && !userProfile.data ?
-					<Stack.Screen name="Loading" component={() =>
-						<Center style={{ flexGrow: 1 }}>
-							<LoadingComponent/>
-						</Center>
-					}/>
+					<Stack.Screen name="Loading" component={RouteToScreen(LoadingView)}/>
 					: routesToScreens(userProfile.isSuccess && accessToken
 						? protectedRoutes()
 						: publicRoutes())

front/views/HomeView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useQueries, useQuery } from "react-query";
 import API from "../API";
-import LoadingComponent from "../components/Loading";
+import { LoadingView } from "../components/Loading";
 import { Center, Box, ScrollView, Flex, useBreakpointValue, Stack, Heading, Container, VStack, HStack } from 'native-base';
 
 import { useNavigation } from "../Navigation";
@@ -24,9 +24,7 @@ const HomeView = () => {
 	)));
 
 	if (!userQuery.data || !skillsQuery.data || !searchHistoryQuery.data || !playHistoryQuery.data) {
-		return <Center style={{ flexGrow: 1 }}>
-			<LoadingComponent/>
-		</Center>
+		return <LoadingView/>
 	}
 	return <ScrollView p={10}>
 		<Flex>

front/views/PlayView.tsx

@@ -8,7 +8,7 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNavigation } from "../Navigation";
 import { useQuery, useQueryClient } from 'react-query';
 import API from '../API';
-import LoadingComponent from '../components/Loading';
+import { LoadingView } from '../components/Loading';
 import Constants from 'expo-constants';
 import { useStopwatch } from 'react-timer-hook';
 import SlideView from '../components/PartitionVisualizer/SlideView';
@@ -147,9 +147,7 @@ const PlayView = ({ songId }: RouteProps<PlayViewProps>) => {
 	const score = 20;
 
 	if (!song.data || !partitionRessources.data) {
-		return <Center style={{ flexGrow: 1 }}>
-			<LoadingComponent/>
-		</Center>
+		return <LoadingView/>;
 	}
 	return (
 		<SafeAreaView style={{ flexGrow: 1, flexDirection: 'column' }}>

front/views/ScoreView.tsx

@@ -6,7 +6,7 @@ import { CardBorderRadius } from "../components/Card";
 import TextButton from "../components/TextButton";
 import API from '../API';
 import { useQuery } from "react-query";
-import LoadingComponent from "../components/Loading";
+import { LoadingView } from "../components/Loading";
 
 type ScoreViewProps = { songId: number }
 
@@ -19,9 +19,7 @@ const ScoreView = ({ songId }: RouteProps<ScoreViewProps>) => {
 	const recommendations = useQuery(['song', 'recommendations'], () => API.getUserRecommendations());
 
 	if (!recommendations.data) {
-		return <Center style={{ flexGrow: 1 }}>
-			<LoadingComponent/>
-		</Center>;
+		return <LoadingView/>;
 	}
 	return <ScrollView p={8} contentContainerStyle={{ alignItems: 'center' }}>
 		<VStack width={{ base: '100%', lg: '50%' }} textAlign='center'>

front/views/SongLobbyView.tsx

@@ -1,13 +1,13 @@
 import { Button, Divider, Box, Center, Image, Text, VStack, PresenceTransition, Icon } from "native-base";
 import { useQuery } from 'react-query';
-import LoadingComponent from "../components/Loading";
+import LoadingComponent, { LoadingView } from "../components/Loading";
 import React, { useEffect, useState } from "react";
 import { Translate, translate } from "../i18n/i18n";
 import formatDuration from "format-duration";
 import { Ionicons } from '@expo/vector-icons';
 import API from "../API";
 import TextButton from "../components/TextButton";
-import { useNavigation } from "../Navigation";
+import { RouteProps, useNavigation } from "../Navigation";
 
 interface SongLobbyProps {
 	// The unique identifier to find a song
@@ -26,9 +26,7 @@ const SongLobbyView = (props: RouteProps<SongLobbyProps>) => {
 	}, [chaptersOpen]);
 	useEffect(() => {}, [songQuery.isLoading]);
 	if (songQuery.isLoading || scoresQuery.isLoading)
-		return <Center style={{ flexGrow: 1 }}>
-			<LoadingComponent/>
-		</Center>
+		return <LoadingView/>;
 	return (
 		<Box style={{ padding: 30, flexDirection: 'column' }}>
 			<Box style={{ flexDirection: 'row', height: '30%'}}>