chore: 8.85.0 release candidate

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/ArtQuiz/ArtQuizArtworks.tsx

@@ -10,7 +10,8 @@ import { FancySwiper, FancySwiperArtworkCard } from "app/Components/FancySwiper/
 import { usePopoverMessage } from "app/Components/PopoverMessage/popoverMessageHooks"
 import { ArtQuizLoader } from "app/Scenes/ArtQuiz/ArtQuizLoader"
 import { GlobalStore } from "app/store/GlobalStore"
-import { goBack, navigate } from "app/system/navigation/navigate"
+// eslint-disable-next-line no-restricted-imports
+import { navigate } from "app/system/navigation/navigate"
 import { extractNodes } from "app/utils/extractNodes"
 import { isEmpty } from "lodash"
 import { Suspense, useEffect, useMemo, useState } from "react"
@@ -106,9 +107,7 @@ const ArtQuizArtworksScreen = () => {
 
   const handleOnBack = () => {
     popoverMessage.hide()
-    if (activeCardIndex === 0) {
-      goBack()
-    } else {
+    if (activeCardIndex !== 0) {
       const previousArtwork = artworks[activeCardIndex - 1]
 
       setActiveCardIndex(activeCardIndex - 1)
@@ -169,6 +168,7 @@ const ArtQuizArtworksScreen = () => {
     <Screen>
       <Screen.Header
         onBack={handleOnBack}
+        hideLeftElements={activeCardIndex === 0}
         title={`${activeCardIndex + 1}/${artworks.length}`}
         rightElements={
           <Touchable accessibilityRole="button" haptic="impactLight" onPress={handleOnSkip}>

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>
   )
 }