From ba641185b29f6abd019baf07b338faff91ad4e52 Mon Sep 17 00:00:00 2001
From: KraXen72 <dpelech1@gmail.com>
Date: Tue, 25 Jun 2024 15:28:02 +0200
Subject: [PATCH] improve loading overlay

---
 minibits.inlang/settings.json                 |  3 +-
 src/components/BottomModal.tsx                | 24 ++++++------
 src/components/Loading.tsx                    | 37 +++++++++++--------
 src/screens/Contacts/OwnName.tsx              |  2 +-
 .../PaymentRequests/IncomingRequests.tsx      |  2 +-
 src/screens/PictureScreen.tsx                 |  2 +-
 src/screens/TranHistoryScreen.tsx             |  4 +-
 7 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/minibits.inlang/settings.json b/minibits.inlang/settings.json
index de74390d..18ab7a59 100644
--- a/minibits.inlang/settings.json
+++ b/minibits.inlang/settings.json
@@ -25,7 +25,8 @@
     ],
     "recognizedJSXAttributes": [
       "tx",
-      "subTx"
+      "subTx",
+      "contentTx"
     ]
   }
 }
\ No newline at end of file
diff --git a/src/components/BottomModal.tsx b/src/components/BottomModal.tsx
index 4662aa32..7ed66993 100644
--- a/src/components/BottomModal.tsx
+++ b/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
+}
\ No newline at end of file
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index b67e8f0d..4c62dd5a 100644
--- a/src/components/Loading.tsx
+++ b/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>
-    )
-}
\ No newline at end of file
+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)
\ No newline at end of file
diff --git a/src/screens/Contacts/OwnName.tsx b/src/screens/Contacts/OwnName.tsx
index 686add6c..d0fe4fcf 100644
--- a/src/screens/Contacts/OwnName.tsx
+++ b/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}
diff --git a/src/screens/PaymentRequests/IncomingRequests.tsx b/src/screens/PaymentRequests/IncomingRequests.tsx
index 873c0174..6907ae8d 100644
--- a/src/screens/PaymentRequests/IncomingRequests.tsx
+++ b/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>
diff --git a/src/screens/PictureScreen.tsx b/src/screens/PictureScreen.tsx
index a1daa3d7..b2c6bce4 100644
--- a/src/screens/PictureScreen.tsx
+++ b/src/screens/PictureScreen.tsx
@@ -133,7 +133,7 @@ const $unselected: ViewStyle = {
 
 const $contentContainer: TextStyle = {    
   padding: spacing.small,
-
+  minHeight: spacing.huge,
 }
 
 const $picturesContainer: TextStyle = { 
diff --git a/src/screens/TranHistoryScreen.tsx b/src/screens/TranHistoryScreen.tsx
index 7731745c..276bcf02 100644
--- a/src/screens/TranHistoryScreen.tsx
+++ b/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}