improve loading overlay

minibits.inlang/settings.json

@@ -25,7 +25,8 @@
     ],
     "recognizedJSXAttributes": [
       "tx",
-      "subTx"
+      "subTx",
+      "contentTx"
     ]
   }
 }

src/components/BottomModal.tsx

@@ -216,19 +216,17 @@ export function BottomModal(props: ModalProps) {
 }
 
 const $outerContainerBase: ViewStyle = {    
-    flex: 1,
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    width: '100%',
-    margin: 0,
+  flex: 1,
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  width: '100%',
+  margin: 0
 }
 
 const $innerContainerBase: ViewStyle = {
-    width: '100%',    
-    alignItems: 'center',
-    borderTopLeftRadius: spacing.small,
-    borderTopRightRadius: spacing.small,
-    padding: spacing.small
-}
-
-
+  width: '100%',    
+  alignItems: 'center',
+  borderTopLeftRadius: spacing.small,
+  borderTopRightRadius: spacing.small,
+  padding: spacing.small
+}

src/components/Loading.tsx

@@ -1,20 +1,25 @@
 import * as React from 'react'
-import { StyleSheet, View, ActivityIndicator, ViewProps, TextStyle } from 'react-native'
+import { StyleSheet, View, ActivityIndicator, ViewProps, TextStyle, ColorValue, ViewStyle } from 'react-native'
 import { useThemeColor } from '../theme'
 import { Text } from './Text'
+import { spacing } from '../theme'
 
-export function Loading(props: ViewProps & {statusMessage?: string, textStyle?: TextStyle}) {
-    return (
-        <View style={[{
-            flex: 1,            
-            alignItems: 'center',
-            backgroundColor: useThemeColor('background'),
-            opacity: 0.5,
-            justifyContent: 'center',
-            zIndex: 9999,
-        }, StyleSheet.absoluteFillObject, props.style]}>
-            <ActivityIndicator color="#ccc" animating size="large" />
-            {props.statusMessage && (<Text style={[{opacity: 1}, props.textStyle]} text={props.statusMessage}/>)}
-        </View>
-    )
-}
+export function Loading(props: ViewProps & { statusMessage?: string, textStyle?: TextStyle, shiftedUp?: boolean }) {
+  return (
+    <View style={[StyleSheet.absoluteFillObject, $loading(useThemeColor('background'), props?.shiftedUp ?? false), props.style]}>
+      <ActivityIndicator color="#ccc" animating size="large" />
+      {props.statusMessage && (<Text style={[{opacity: 1}, props.textStyle]} text={props.statusMessage}/>)}
+    </View>
+  )
+}
+
+const $loading = (bg: ColorValue, shiftedUp = false) => ({
+  flex: 1,
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: bg,
+  opacity: 0.5,
+  zIndex: 9999,
+  // for cards that go up in the header, the loading should cover them
+  marginTop: shiftedUp ? -(spacing.extraLarge * 2 + spacing.small) : 0,
+} satisfies ViewStyle)

src/screens/Contacts/OwnName.tsx

@@ -466,7 +466,7 @@ export const OwnName = observer(function (props: {navigation: any, pubkey: strin
                     }
                 />
             )}
-            {isLoading && <Loading />}        
+        {isLoading && <Loading />}
         </View>
         <BottomModal
           isVisible={isResultModalVisible ? true : false}

src/screens/PaymentRequests/IncomingRequests.tsx

@@ -77,8 +77,8 @@ export const IncomingRequests = observer(function (props: {
                 style={$card}
             />
           )}
-          {isLoading && <Loading />}
         </View>
+        {isLoading && <Loading />}
         {error && <ErrorModal error={error} />}
         {info && <InfoModal message={info} />}
       </Screen>

src/screens/PictureScreen.tsx

@@ -133,7 +133,7 @@ const $unselected: ViewStyle = {
 
 const $contentContainer: TextStyle = {    
   padding: spacing.small,
-
+  minHeight: spacing.huge,
 }
 
 const $picturesContainer: TextStyle = { 

src/screens/TranHistoryScreen.tsx

@@ -349,8 +349,8 @@ export const TranHistoryScreen: FC<TransactionsStackScreenProps<'TranHistory'>>
                     />
                 }
                 style={{maxHeight: spacing.screenHeight * 0.66}}                                
-            />                                        
-            {isLoading && <Loading />}
+            />    
+          {isLoading && <Loading shiftedUp={true} />}
         </View>
         <BottomModal
           isVisible={isDeleteModalVisible ? true : false}