better android loading

src/screens/Feeds/VibeScreen.tsx

@@ -10,9 +10,15 @@ import {
 import {Gesture, GestureDetector} from 'react-native-gesture-handler'
 import {runOnJS} from 'react-native-reanimated'
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context'
+import {useEvent} from 'expo'
 import {Image} from 'expo-image'
 import {LinearGradient} from 'expo-linear-gradient'
-import {useVideoPlayer, VideoPlayer, VideoView} from 'expo-video'
+import {
+  useVideoPlayer,
+  VideoPlayer,
+  VideoPlayerStatus,
+  VideoView,
+} from 'expo-video'
 import {
   AppBskyEmbedVideo,
   AppBskyFeedDefs,
@@ -45,6 +51,7 @@ import {atoms as a, ThemeProvider, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Layout from '#/components/Layout'
 import {ListFooter} from '#/components/Lists'
+import {Loader} from '#/components/Loader'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
@@ -268,6 +275,8 @@ function VibeItem({
   // set the video to be cover rather than contain
   const isCloseEnough = videoAspectRatio < screenAspectRatio * 1.2
 
+  const {status} = useEvent(player, 'statusChange', {status: player.status})
+
   return (
     <View
       style={{
@@ -292,7 +301,7 @@ function VibeItem({
               a.flex_1,
               a.absolute,
               {
-                zIndex: -1,
+                zIndex: status === 'loading' ? 1 : -1,
                 top: 0,
                 left: insets.left,
                 right: insets.right,
@@ -302,7 +311,7 @@ function VibeItem({
             contentFit={isCloseEnough ? 'cover' : 'contain'}
           />
         )}
-        <VibeOverlay player={player} post={post} />
+        <VibeOverlay player={player} post={post} status={status} />
       </SafeAreaView>
     </View>
   )
@@ -311,9 +320,11 @@ function VibeItem({
 function VibeOverlay({
   player,
   post,
+  status,
 }: {
   player: VideoPlayer
   post: AppBskyFeedDefs.PostView
+  status: VideoPlayerStatus
 }) {
   const postShadow = usePostShadow(post)
   const insets = useSafeAreaInsets()
@@ -357,6 +368,7 @@ function VibeOverlay({
   })
 
   return (
+    <>
       <GestureDetector gesture={gesture}>
         <View style={[a.absolute, a.inset_0, {bottom: insets.bottom}]}>
           <Button
@@ -402,7 +414,10 @@ function VibeOverlay({
                 record={record}
                 logContext="FeedItem"
                 onPressReply={() =>
-                navigation.navigate('PostThread', {name: post.author.did, rkey})
+                  navigation.navigate('PostThread', {
+                    name: post.author.did,
+                    rkey,
+                  })
                 }
                 big
               />
@@ -410,6 +425,20 @@ function VibeOverlay({
           </LinearGradient>
         </View>
       </GestureDetector>
+      {status === 'loading' && (
+        <View
+          style={[
+            a.absolute,
+            a.inset_0,
+            a.align_center,
+            a.justify_center,
+            a.z_10,
+          ]}
+          pointerEvents="none">
+          <Loader size="2xl" />
+        </View>
+      )}
+    </>
   )
 }