Fix blank area after loading pdf

src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

@@ -64,6 +64,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
                         file={{name: displayName}}
                         shouldShowDownloadIcon={!isOffline}
                         shouldShowLoadingSpinnerIcon={isDownloading}
+                        isUsedAsChatAttachment
                     />
                 </PressableWithoutFeedback>
             )}

src/components/Attachments/AttachmentCarousel/CarouselItem.js

@@ -109,6 +109,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered}) {
                     isHovered={isModalHovered}
                     isFocused={isFocused}
                     optionalVideoDuration={item.duration}
+                    isUsedInCarousel
                 />
             </View>
 

src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js

@@ -28,6 +28,8 @@ function BaseAttachmentViewPdf({
     onLoadComplete,
     errorLabelStyles,
     style,
+    isUsedAsChatAttachment,
+    onError,
 }) {
     const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext);
     const isScrollEnabled = attachmentCarouselPagerContext === null ? undefined : attachmentCarouselPagerContext.isScrollEnabled;
@@ -89,6 +91,8 @@ function BaseAttachmentViewPdf({
             onScaleChanged={onScaleChanged}
             onLoadComplete={onLoadComplete}
             errorLabelStyles={errorLabelStyles}
+            isUsedAsChatAttachment={isUsedAsChatAttachment}
+            onError={onError}
         />
     );
 }

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js

@@ -2,7 +2,7 @@ import React, {memo} from 'react';
 import PDFView from '@components/PDFView';
 import {attachmentViewPdfDefaultProps, attachmentViewPdfPropTypes} from './propTypes';
 
-function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) {
+function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onToggleKeyboard, onLoadComplete, errorLabelStyles, style, onError, isUsedAsChatAttachment}) {
     return (
         <PDFView
             onPress={onPress}
@@ -13,6 +13,8 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onTogg
             onToggleKeyboard={onToggleKeyboard}
             onLoadComplete={onLoadComplete}
             errorLabelStyles={errorLabelStyles}
+            onError={onError}
+            isUsedAsChatAttachment={isUsedAsChatAttachment}
         />
     );
 }

src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js

@@ -15,6 +15,12 @@ const attachmentViewPdfPropTypes = {
 
     /** Styles for the error label */
     errorLabelStyles: stylePropTypes,
+
+    /** Callback when the pdf fails to load */
+    onError: PropTypes.func,
+
+    /** Whether the attachment is used as a chat attachment */
+    isUsedAsChatAttachment: PropTypes.bool,
 };
 
 const attachmentViewPdfDefaultProps = {
@@ -23,6 +29,8 @@ const attachmentViewPdfDefaultProps = {
     },
     style: [],
     errorLabelStyles: [],
+    onError: () => {},
+    isUsedAsChatAttachment: false,
 };
 
 export {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps};

src/components/Attachments/AttachmentView/index.js

@@ -62,9 +62,14 @@ const propTypes = {
     /** The id of the report action related to the attachment */
     reportActionID: PropTypes.string,
 
+    /** Whether the attachment is currently being hovered over */
     isHovered: PropTypes.bool,
 
+    /** The duration of the video */
     optionalVideoDuration: PropTypes.number,
+
+    /** Whether the attachment is being used as a chat attachment */
+    isUsedAsChatAttachment: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -79,6 +84,7 @@ const defaultProps = {
     reportActionID: '',
     isHovered: false,
     optionalVideoDuration: 0,
+    isUsedAsChatAttachment: false,
 };
 
 function AttachmentView({
@@ -101,13 +107,15 @@ function AttachmentView({
     reportActionID,
     isHovered,
     optionalVideoDuration,
+    isUsedAsChatAttachment,
 }) {
     const {updateCurrentlyPlayingURL} = usePlaybackContext();
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const [loadComplete, setLoadComplete] = useState(false);
     const isVideo = (typeof source === 'string' && Str.isVideo(source)) || (file && Str.isVideo(file.name));
+    const [isPdfFailedToLoad, setIsPdfFailedToLoad] = useState(false);
 
     useEffect(() => {
         if (!isFocused && !(file && isUsedInAttachmentModal)) {
@@ -157,7 +165,7 @@ function AttachmentView({
 
     // Check both source and file.name since PDFs dragged into the text field
     // will appear with a source that is a blob
-    if ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename')))) {
+    if (!isPdfFailedToLoad && ((_.isString(source) && Str.isPDF(source)) || (file && Str.isPDF(file.name || translate('attachmentView.unknownFilename'))))) {
         const encryptedSourceUrl = isAuthTokenRequired ? addEncryptedAuthTokenToURL(source) : source;
 
         const onPDFLoadComplete = (path) => {
@@ -187,6 +195,10 @@ function AttachmentView({
                     errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [styles.cursorAuto]}
                     style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1}
                     isUsedInCarousel={isUsedInCarousel}
+                    isUsedAsChatAttachment={isUsedAsChatAttachment}
+                    onError={() => {
+                        setIsPdfFailedToLoad(true);
+                    }}
                 />
             </View>
         );

src/components/InvertedFlatList/BaseInvertedFlatList.tsx

@@ -4,7 +4,7 @@ import type {FlatListProps} from 'react-native';
 import FlatList from '@components/FlatList';
 
 const WINDOW_SIZE = 15;
-const AUTOSCROLL_TO_TOP_THRESHOLD = 128;
+const AUTOSCROLL_TO_TOP_THRESHOLD = 250;
 
 function BaseInvertedFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>) {
     return (

src/components/PDFView/WebPDFDocument.js

@@ -5,16 +5,11 @@ import {Document} from 'react-pdf';
 import {VariableSizeList as List} from 'react-window';
 import _ from 'underscore';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import Text from '@components/Text';
 import stylePropTypes from '@styles/stylePropTypes';
 import CONST from '@src/CONST';
 import PageRenderer from './WebPDFPageRenderer';
 
 const propTypes = {
-    /** Index of the PDF page to be displayed passed by VariableSizeList */
-    errorLabelStyles: stylePropTypes,
-    /** Returns translated string for given locale and phrase */
-    translate: PropTypes.func.isRequired,
     /** The source URL from which to load PDF file to be displayed */
     sourceURL: PropTypes.string.isRequired,
     /** Callback invoked when the PDF document is loaded successfully */
@@ -48,19 +43,18 @@ const propTypes = {
      * - `undefined` if password isn't needed to view the PDF file
      * - `null` if the password is required but hasn't been provided yet */
     password: PropTypes.string,
+    /** Callback invoked when the PDF document fails to load */
+    onError: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
-    errorLabelStyles: [],
     numPages: null,
     listStyle: undefined,
     password: undefined,
 };
 
 const WebPDFDocument = memo(
     ({
-        errorLabelStyles,
-        translate,
         sourceURL,
         onDocumentLoadSuccess,
         pageViewportsLength,
@@ -76,6 +70,7 @@ const WebPDFDocument = memo(
         listStyle,
         initiatePasswordChallenge,
         password,
+        onError,
     }) => {
         const onPassword = useCallback(
             (callback, reason) => {
@@ -95,7 +90,7 @@ const WebPDFDocument = memo(
         return (
             <Document
                 loading={<FullScreenLoadingIndicator />}
-                error={<Text style={errorLabelStyles}>{translate('attachmentView.failedToLoadPDF')}</Text>}
+                onLoadError={onError}
                 file={sourceURL}
                 options={{
                     cMapUrl: 'cmaps/',

src/components/PDFView/index.js

@@ -270,6 +270,7 @@ class PDFView extends Component {
                         pageWidth={pageWidth}
                         password={this.state.password}
                         initiatePasswordChallenge={this.initiatePasswordChallenge}
+                        onError={this.props.onError}
                     />
                 </View>
                 {(this.state.password === PDFViewConstants.REQUIRED_PASSWORD_MISSING || this.state.isCheckingPassword) && (

src/components/PDFView/index.native.js

@@ -4,7 +4,6 @@ import PDF from 'react-native-pdf';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
-import Text from '@components/Text';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -33,7 +32,10 @@ const propTypes = {
  * is (temporarily) rendered.
  */
 
-function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, errorLabelStyles}) {
+const LOADING_THUMBNAIL_HEIGHT = 250;
+const LOADING_THUMBNAIL_WIDTH = 250;
+
+function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, onError, isUsedAsChatAttachment}) {
     const [shouldRequestPassword, setShouldRequestPassword] = useState(false);
     const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true);
     const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true);
@@ -84,6 +86,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused
         setShouldShowLoadingIndicator(false);
         setShouldRequestPassword(false);
         setShouldAttemptPDFLoad(false);
+        onError(error);
     };
 
     /**
@@ -115,7 +118,9 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused
     };
 
     function renderPDFView() {
-        const pdfStyles = [themeStyles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(windowWidth, windowHeight)];
+        const pdfHeight = isUsedAsChatAttachment ? LOADING_THUMBNAIL_HEIGHT : windowHeight;
+        const pdfWeight = isUsedAsChatAttachment ? LOADING_THUMBNAIL_WIDTH : windowWidth;
+        const pdfStyles = [StyleUtils.getWidthAndHeightStyle(pdfWeight, pdfHeight), themeStyles.imageModalPDF];
 
         // If we haven't yet successfully validated the password and loaded the PDF,
         // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm
@@ -124,21 +129,19 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused
         if (shouldRequestPassword) {
             pdfStyles.push(themeStyles.invisible);
         }
-
-        const containerStyles = shouldRequestPassword && isSmallScreenWidth ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1];
+        const containerStyles =
+            isUsedAsChatAttachment || (shouldRequestPassword && isSmallScreenWidth) ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1];
+        const loadingIndicatorStyles = isUsedAsChatAttachment
+            ? [themeStyles.chatItemPDFAttachmentLoading, StyleUtils.getWidthAndHeightStyle(LOADING_THUMBNAIL_WIDTH, LOADING_THUMBNAIL_HEIGHT)]
+            : [];
 
         return (
             <View style={containerStyles}>
-                {failedToLoadPDF && (
-                    <View style={[themeStyles.flex1, themeStyles.justifyContentCenter]}>
-                        <Text style={errorLabelStyles}>{translate('attachmentView.failedToLoadPDF')}</Text>
-                    </View>
-                )}
                 {shouldAttemptPDFLoad && (
                     <PDF
                         fitPolicy={0}
                         trustAllCerts={false}
-                        renderActivityIndicator={() => <FullScreenLoadingIndicator />}
+                        renderActivityIndicator={() => <FullScreenLoadingIndicator style={loadingIndicatorStyles} />}
                         source={{uri: sourceURL, cache: true, expiration: 864000}}
                         style={pdfStyles}
                         onError={handleFailureToLoadPDF}

src/styles/index.ts

@@ -516,6 +516,10 @@ const styles = (theme: ThemeColors) =>
             borderRadius: variables.buttonBorderRadius,
         },
 
+        componentBorderRadiusNormal: {
+            borderRadius: variables.componentBorderRadiusNormal,
+        },
+
         bottomTabBarContainer: {
             flexDirection: 'row',
             height: variables.bottomTabHeight,
@@ -2120,6 +2124,16 @@ const styles = (theme: ThemeColors) =>
             width: 200,
         },
 
+        chatItemPDFAttachmentLoading: {
+            backgroundColor: 'transparent',
+            borderColor: theme.border,
+            borderWidth: 1,
+            borderRadius: variables.componentBorderRadiusNormal,
+            textAlign: 'center',
+            verticalAlign: 'middle',
+            opacity: 1,
+        },
+
         sidebarVisible: {
             borderRightWidth: 1,
         },