fix: replace animated header with non-animated header in placeholders to resolve suspense bug (#12844)

* fix: replace animated header with non-animated header in placeholders to resolve suspense bug

* hide second header in placeholders

Author: gkartalis

src/app/Components/Cards/CardWithMetaData.tsx

@@ -121,7 +121,9 @@ export const CardsWithMetaDataListPlaceholder: React.FC<CardsWithMetaDataListPla
 
   return (
     <Screen>
-      <Screen.AnimatedHeader onBack={goBack} title={title} />
+      {/* IMPORTANT: use a non animated header inside placeholders due to a bug that never
+      lets suspense resolve when used with an animated header and resulting on a blank screen. */}
+      <Screen.Header onBack={goBack} title="" />
       <Screen.Body fullwidth>
         <ProvidePlaceholderContext>
           <Flex testID={testID} flexDirection="column" justifyContent="space-between" height="100%">

src/app/Scenes/MyProfile/Components/MyProfileScreenWrapper.tsx

@@ -57,3 +57,49 @@ export const MyProfileScreenWrapper: React.FC<
     </Screen>
   )
 }
+
+/* IMPORTANT: use a non animated header inside placeholders due to a bug that never
+lets suspense resolve when used with an animated header and resulting on a blank screen. */
+export const MyProfileScreenWrapperPlaceholder: React.FC<
+  React.PropsWithChildren<MyProfileScreenWrapperProps>
+> = ({
+  children,
+  title,
+  onPress,
+  hideLeftElements = false,
+  contentContainerStyle,
+  RefreshControl,
+}) => {
+  const space = useSpace()
+
+  return (
+    <Screen>
+      <Screen.Header title="" hideLeftElements={hideLeftElements} onBack={goBack} />
+      <Screen.StickySubHeader title={title} />
+      <Screen.Body fullwidth>
+        <Screen.ScrollView
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode="on-drag"
+          contentContainerStyle={{
+            paddingTop: space(2),
+            paddingHorizontal: space(2),
+            // This is required to make room for the save button on top of the bottom tabs
+            // Screen.ScrollView doesn't consider the save button in its height calculation
+            paddingBottom: SCROLLVIEW_PADDING_BOTTOM_OFFSET,
+            ...contentContainerStyle,
+          }}
+          refreshControl={RefreshControl}
+        >
+          {children}
+          {!!onPress && (
+            <Flex my={2}>
+              <Button block onPress={onPress} disabled loading>
+                Save
+              </Button>
+            </Flex>
+          )}
+        </Screen.ScrollView>
+      </Screen.Body>
+    </Screen>
+  )
+}

src/app/Scenes/MyProfile/MyProfilePushNotifications.tsx

@@ -8,7 +8,10 @@ import {
 import { LoadFailureView } from "app/Components/LoadFailureView"
 import { SwitchMenu } from "app/Components/SwitchMenu"
 import { updateMyUserProfile } from "app/Scenes/MyAccount/updateMyUserProfile"
-import { MyProfileScreenWrapper } from "app/Scenes/MyProfile/Components/MyProfileScreenWrapper"
+import {
+  MyProfileScreenWrapper,
+  MyProfileScreenWrapperPlaceholder,
+} from "app/Scenes/MyProfile/Components/MyProfileScreenWrapper"
 import {
   getNotificationPermissionsStatus,
   PushAuthorizationStatus,
@@ -157,7 +160,10 @@ const NotificationPermissionsBox = ({
 
 const MyProfilePushNotificationsPlaceholder: React.FC<{}> = () => {
   return (
-    <MyProfileScreenWrapper title="Notifications" contentContainerStyle={{ paddingHorizontal: 0 }}>
+    <MyProfileScreenWrapperPlaceholder
+      title="Notifications"
+      contentContainerStyle={{ paddingHorizontal: 0 }}
+    >
       <Flex>
         <Content
           userNotificationSettings={
@@ -179,7 +185,7 @@ const MyProfilePushNotificationsPlaceholder: React.FC<{}> = () => {
           notificationAuthorizationStatus={PushAuthorizationStatus.NotDetermined}
         />
       </Flex>
-    </MyProfileScreenWrapper>
+    </MyProfileScreenWrapperPlaceholder>
   )
 }