Update loading state for chats (#10596)

src/screens/Messages/components/MessagesList.tsx

@@ -12,13 +12,15 @@ import {
   type KeyboardChatScrollViewProps,
   KeyboardGestureArea,
 } from 'react-native-keyboard-controller'
-import {
+import Animated, {
   runOnJS,
   type ScrollEvent,
   type SharedValue,
   useAnimatedRef,
+  useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
+  withTiming,
 } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
@@ -157,6 +159,16 @@ export function MessagesList({
     startContentOffset: 0,
   })
 
+  const listOpacity = useSharedValue(0)
+
+  useEffect(() => {
+    if (hasScrolled) {
+      listOpacity.set(withTiming(1, {duration: 200}))
+    } else {
+      listOpacity.set(0)
+    }
+  }, [hasScrolled, listOpacity])
+
   const inputHeightUI = useSharedValue(0)
   const [inputHeightJS, setInputHeightJS] = useState(0)
 
@@ -476,6 +488,10 @@ export function MessagesList({
     [inputHeightUI],
   )
 
+  const animatedListStyle = useAnimatedStyle(() => ({
+    opacity: listOpacity.get(),
+  }))
+
   return (
     <InviteLinkDialogProvider convo={convoState.convo}>
       <KeyboardGestureArea
@@ -486,64 +502,69 @@ export function MessagesList({
         // textInputNativeID={textInputId}
         style={[a.flex_1]}>
         {/* Custom scroll provider so that we can use the `onScroll` event in our custom List implementation */}
-        <ScrollProvider onScroll={onScroll}>
-          <List
-            ref={flatListRef}
-            data={renderItems}
-            renderItem={renderItem}
-            keyExtractor={keyExtractor}
-            disableFullWindowScroll={true}
-            disableVirtualization={true}
-            // The extra two items account for the header and the footer components
-            initialNumToRender={IS_NATIVE ? 32 : 62}
-            maxToRenderPerBatch={IS_WEB ? 32 : 62}
-            keyboardDismissMode="interactive"
-            keyboardShouldPersistTaps="handled"
-            maintainVisibleContentPosition={{minIndexForVisible: 0}}
-            removeClippedSubviews={false}
-            sideBorders={false}
-            onContentSizeChange={onContentSizeChange}
-            onStartReached={onStartReached}
-            onScrollToIndexFailed={onScrollToIndexFailed}
-            showsVerticalScrollIndicator={!IS_ANDROID}
-            scrollEventThrottle={100}
-            ListHeaderComponent={
-              <>
-                <MaybeLoader isLoading={convoState.isFetchingHistory} />
-                {convoState.hasAllHistory ? (
-                  convoState.convo?.kind === 'group' ? (
-                    <MessagesListGroupInfoPanel convo={convoState.convo} />
-                  ) : (
-                    <MessagesListInfoPanel convo={convoState.convo} />
-                  )
-                ) : null}
-              </>
-            }
-            // native only (prop is not supported on web)
-            renderScrollComponent={renderScrollComponent}
-            contentContainerStyle={{
-              paddingBottom: platform({
-                // ios is slightly larger as the input has no top padding
-                ios: tokens.space.lg,
-                android: tokens.space.md,
-                web: 0, // web uses ListFooterComponent instead for scroll reasons
-              }),
-            }}
-            ListFooterComponent={
-              <View
-                style={web({height: tokens.space.md + inputHeightJS})}
-                onLayout={onFooterLayout}
-              />
-            }
-            style={web({
-              scrollbarWidth: 'thin',
-              scrollbarColor: `${t.palette.contrast_100} transparent`,
-              scrollbarGutter: 'stable',
-            })}
-            contentInset={{top: transparentHeaderHeight}}
-            scrollIndicatorInsets={{top: transparentHeaderHeight}}
-          />
-        </ScrollProvider>
+        <Animated.View style={[a.flex_1, animatedListStyle]}>
+          <ScrollProvider onScroll={onScroll}>
+            <List
+              ref={flatListRef}
+              data={renderItems}
+              renderItem={renderItem}
+              keyExtractor={keyExtractor}
+              disableFullWindowScroll={true}
+              disableVirtualization={true}
+              // The extra two items account for the header and the footer components
+              initialNumToRender={IS_NATIVE ? 32 : 62}
+              maxToRenderPerBatch={IS_WEB ? 32 : 62}
+              keyboardDismissMode="interactive"
+              keyboardShouldPersistTaps="handled"
+              maintainVisibleContentPosition={{minIndexForVisible: 0}}
+              removeClippedSubviews={false}
+              sideBorders={false}
+              onContentSizeChange={onContentSizeChange}
+              onStartReached={onStartReached}
+              onScrollToIndexFailed={onScrollToIndexFailed}
+              showsVerticalScrollIndicator={!IS_ANDROID}
+              scrollEventThrottle={100}
+              ListHeaderComponent={
+                <>
+                  <MaybeLoader isLoading={convoState.isFetchingHistory} />
+                  {convoState.hasAllHistory ? (
+                    convoState.convo?.kind === 'group' ? (
+                      <MessagesListGroupInfoPanel convo={convoState.convo} />
+                    ) : (
+                      <MessagesListInfoPanel convo={convoState.convo} />
+                    )
+                  ) : null}
+                </>
+              }
+              // native only (prop is not supported on web)
+              renderScrollComponent={renderScrollComponent}
+              contentContainerStyle={{
+                paddingBottom: platform({
+                  // ios is slightly larger as the input has no top padding
+                  ios: tokens.space.lg,
+                  android: tokens.space.md,
+                  web: 0, // web uses ListFooterComponent instead for scroll reasons
+                }),
+              }}
+              ListFooterComponent={
+                <View
+                  style={web({height: tokens.space.md + inputHeightJS})}
+                  onLayout={onFooterLayout}
+                />
+              }
+              style={[
+                web({
+                  scrollbarWidth: 'thin',
+                  scrollbarColor: `${t.palette.contrast_100} transparent`,
+                  scrollbarGutter: 'stable',
+                }),
+              ]}
+              pointerEvents={!hasScrolled ? 'none' : 'auto'}
+              contentInset={{top: transparentHeaderHeight}}
+              scrollIndicatorInsets={{top: transparentHeaderHeight}}
+            />
+          </ScrollProvider>
+        </Animated.View>
         <KeyboardStickyView
           style={[a.absolute, a.bottom_0, a.left_0, a.right_0]}
           onLayout={onInputLayout}
@@ -559,25 +580,35 @@ export function MessagesList({
             <ConversationFooter
               convoState={convoState}
               hasAcceptOverride={hasAcceptOverride}>
-              {ax.features.enabled(ax.features.DmsNewMessageComposerEnable) ? (
-                <MessageComposer
-                  textInputId={textInputId}
-                  onSendMessage={(message: string) =>
-                    void onSendMessage(message)
-                  }
-                  hasEmbed={!!embedUri}
-                  setEmbed={setEmbed}>
-                  <MessageInputEmbed embedUri={embedUri} setEmbed={setEmbed} />
-                </MessageComposer>
-              ) : (
-                <MessageInput
-                  textInputId={textInputId}
-                  onSendMessage={onSendMessage}
-                  hasEmbed={!!embedUri}
-                  setEmbed={setEmbed}>
-                  <MessageInputEmbed embedUri={embedUri} setEmbed={setEmbed} />
-                </MessageInput>
-              )}
+              {({loading}) =>
+                ax.features.enabled(ax.features.DmsNewMessageComposerEnable) ? (
+                  <MessageComposer
+                    textInputId={textInputId}
+                    onSendMessage={(message: string) =>
+                      void onSendMessage(message)
+                    }
+                    hasEmbed={!!embedUri}
+                    setEmbed={setEmbed}
+                    loading={loading}>
+                    <MessageInputEmbed
+                      embedUri={embedUri}
+                      setEmbed={setEmbed}
+                    />
+                  </MessageComposer>
+                ) : (
+                  <MessageInput
+                    textInputId={textInputId}
+                    onSendMessage={onSendMessage}
+                    hasEmbed={!!embedUri}
+                    setEmbed={setEmbed}
+                    loading={loading}>
+                    <MessageInputEmbed
+                      embedUri={embedUri}
+                      setEmbed={setEmbed}
+                    />
+                  </MessageInput>
+                )
+              }
             </ConversationFooter>
           )}
         </KeyboardStickyView>
@@ -657,23 +688,25 @@ function ConversationFooter({
 }: {
   convoState: ConvoState
   hasAcceptOverride?: boolean
-  children?: React.ReactNode // message input
+  children?: ((props: {loading?: boolean}) => React.ReactNode) | React.ReactNode
 }) {
   if (!isConvoActive(convoState)) {
     return null
   }
 
   const footerState = getFooterState(convoState, hasAcceptOverride)
+  const renderChildren = (loading?: boolean) =>
+    typeof children === 'function' ? children({loading}) : children
 
   switch (footerState) {
     case 'loading':
-      return null
+      return renderChildren(true)
     case 'new-chat':
       // new chat pill goes here - removed for now
-      return children
+      return renderChildren()
     case 'request':
       return <ChatStatusInfo convoState={convoState} />
     case 'standard':
-      return children
+      return renderChildren()
   }
 }