diff --git a/components/modals/AvalancheCenterSelectionModal.tsx b/components/modals/AvalancheCenterSelectionModal.tsx index 234e8a7b..d0fa2d53 100644 --- a/components/modals/AvalancheCenterSelectionModal.tsx +++ b/components/modals/AvalancheCenterSelectionModal.tsx @@ -1,17 +1,17 @@ import React, {useCallback, useState} from 'react'; -import {ScrollView, StyleSheet} from 'react-native'; +import {ScrollView} from 'react-native'; import Topo from 'assets/illustrations/topo.svg'; import {avalancheCenterList, AvalancheCenters} from 'components/avalancheCenterList'; import {AvalancheCenterList} from 'components/content/AvalancheCenterList'; import {Button} from 'components/content/Button'; import {incompleteQueryState, QueryState} from 'components/content/QueryState'; -import {Center, Divider, View, VStack} from 'components/core'; +import {Center, Divider, VStack} from 'components/core'; import {Body, BodyBlack, Title3Black} from 'components/text'; import {useAllAvalancheCenterMetadata} from 'hooks/useAllAvalancheCenterMetadata'; import {useAvalancheCenterCapabilities} from 'hooks/useAvalancheCenterCapabilities'; import {Modal} from 'react-native'; -import {SafeAreaProvider, SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'; +import {useSafeAreaInsets} from 'react-native-safe-area-context'; import {colorLookup} from 'theme'; import {AvalancheCenter, AvalancheCenterID} from 'types/nationalAvalancheCenter'; @@ -40,44 +40,37 @@ export const AvalancheCenterSelectionModal: React.FC; - } - return ( - - - - {/* view to paint the very bottom of the screen white */} - - {/* overflow hidden to keep the topo illustration from going beyond this view */} - - {/* these magic numbers are yanked out of Figma */} - - -
- - Welcome! Get started by selecting your local avalanche center. - -
-
- You can change this anytime in settings. -
- - - -
- -
- -
-
-
-
-
+ {incompleteQueryState(capabilitiesResult, ...metadataResults) || !capabilities ? ( + // We want to show the query state as a part of the modal so that it only shows when the modal is present + + ) : ( + // overflow hidden to keep the topo illustration from going beyond this view + + {/* these magic numbers are yanked out of Figma */} + + +
+ + Welcome! Get started by selecting your local avalanche center. + +
+
+ You can change this anytime in settings. +
+ + + +
+ +
+ +
+
+ )}
); };