From 8747c215b1735e9074fbfd43003d72793498e125 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Fri, 3 Nov 2023 02:33:18 +0000
Subject: [PATCH] Work around a startup stall caused by expo-image on low-end
 Android (#1801)

* Use plain RN image for startup-blocking UI

* Add comments
---
 src/view/com/util/UserAvatar.tsx        | 29 ++++++++++++++++++-------
 src/view/shell/Drawer.tsx               |  7 +++++-
 src/view/shell/bottom-bar/BottomBar.tsx | 14 ++++++++++--
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 7b23547c..9db45732 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -1,5 +1,5 @@
 import React, {useMemo} from 'react'
-import {StyleSheet, View} from 'react-native'
+import {Image, StyleSheet, View} from 'react-native'
 import Svg, {Circle, Rect, Path} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {HighPriorityImage} from 'view/com/util/images/Image'
@@ -27,6 +27,7 @@ interface BaseUserAvatarProps {
 
 interface UserAvatarProps extends BaseUserAvatarProps {
   moderation?: ModerationUI
+  usePlainRNImage?: boolean
 }
 
 interface EditableUserAvatarProps extends BaseUserAvatarProps {
@@ -110,6 +111,7 @@ export function UserAvatar({
   size,
   avatar,
   moderation,
+  usePlainRNImage = false,
 }: UserAvatarProps) {
   const pal = usePalette('default')
 
@@ -146,13 +148,24 @@ export function UserAvatar({
   return avatar &&
     !((moderation?.blur && isAndroid) /* android crashes with blur */) ? (
     <View style={{width: size, height: size}}>
-      <HighPriorityImage
-        testID="userAvatarImage"
-        style={aviStyle}
-        contentFit="cover"
-        source={{uri: avatar}}
-        blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
-      />
+      {usePlainRNImage ? (
+        <Image
+          accessibilityIgnoresInvertColors
+          testID="userAvatarImage"
+          style={aviStyle}
+          resizeMode="cover"
+          source={{uri: avatar}}
+          blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
+        />
+      ) : (
+        <HighPriorityImage
+          testID="userAvatarImage"
+          style={aviStyle}
+          contentFit="cover"
+          source={{uri: avatar}}
+          blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
+        />
+      )}
       {alert}
     </View>
   ) : (
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index 95b79faa..c2d307f5 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -158,7 +158,12 @@ export const DrawerContent = observer(function DrawerContentImpl() {
               accessibilityLabel="Profile"
               accessibilityHint="Navigates to your profile"
               onPress={onPressProfile}>
-              <UserAvatar size={80} avatar={store.me.avatar} />
+              <UserAvatar
+                size={80}
+                avatar={store.me.avatar}
+                // See https://github.com/bluesky-social/social-app/pull/1801:
+                usePlainRNImage={true}
+              />
               <Text
                 type="title-lg"
                 style={[pal.text, s.bold, styles.profileCardDisplayName]}
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index cfd4d46d..c4e3790a 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -192,11 +192,21 @@ export const BottomBar = observer(function BottomBarImpl({
                   styles.onProfile,
                   {borderColor: pal.text.color},
                 ]}>
-                <UserAvatar avatar={store.me.avatar} size={27} />
+                <UserAvatar
+                  avatar={store.me.avatar}
+                  size={27}
+                  // See https://github.com/bluesky-social/social-app/pull/1801:
+                  usePlainRNImage={true}
+                />
               </View>
             ) : (
               <View style={[styles.ctrlIcon, pal.text, styles.profileIcon]}>
-                <UserAvatar avatar={store.me.avatar} size={28} />
+                <UserAvatar
+                  avatar={store.me.avatar}
+                  size={28}
+                  // See https://github.com/bluesky-social/social-app/pull/1801:
+                  usePlainRNImage={true}
+                />
               </View>
             )}
           </View>