-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix - Attachment page keeps on loading infinitely. #39290
Merged
marcochavezf
merged 36 commits into
Expensify:main
from
FitseTLT:fix-attachement-offline-indicator
May 14, 2024
Merged
Changes from all commits
Commits
Show all changes
36 commits
Select commit
Hold shift + click to select a range
91daa59
implemented offline indicator for video
FitseTLT 58cea0a
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 108740d
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 7b007e7
Created attachment offline indicator component
FitseTLT 2a25277
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 211c18b
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 80a7113
did code cleanup
FitseTLT e6153f2
fix lint and type
FitseTLT cbf52fe
revert unnecessary change
FitseTLT b3f14d6
removed unnecessary view
FitseTLT 17cb608
implemented for image view
FitseTLT 29c89d7
implemented for thumbnail preview
FitseTLT da53445
minor fix
FitseTLT a2c8cbc
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 2a69717
implemented offline indicator for native
FitseTLT bf1786e
minor fix
FitseTLT 841c61e
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 2a7fac5
revert light box change
FitseTLT bbfda4d
fix buffering case
FitseTLT 6cb699d
fix touch screen case for image view
FitseTLT cbea4ac
fix logic for zoom scale
FitseTLT 1142478
fix light box offline indicator
FitseTLT df8edb1
fix cached image case offline indicator
FitseTLT 2d6fe9a
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT f083512
fix android loading indicator case
FitseTLT 36ccc93
minor fix
FitseTLT 75a772e
fix receipt offline indicator case
FitseTLT bd00d41
minor fix
FitseTLT 851f387
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 0c01e8f
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 243dd47
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 23ed2e3
added delay for offline indicator
FitseTLT 4de0a96
revert unnecessary change
FitseTLT 99218b3
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 3e31bf8
Merge branch 'main' into fix-attachement-offline-indicator
FitseTLT 1dd5ee4
add offline indicator for lightbox
FitseTLT File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import React, {useEffect, useState} from 'react'; | ||
import {View} from 'react-native'; | ||
import useLocalize from '@hooks/useLocalize'; | ||
import useNetwork from '@hooks/useNetwork'; | ||
import useTheme from '@hooks/useTheme'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
import variables from '@styles/variables'; | ||
import Icon from './Icon'; | ||
import * as Expensicons from './Icon/Expensicons'; | ||
import Text from './Text'; | ||
|
||
type AttachmentOfflineIndicatorProps = { | ||
/** Whether the offline indicator is displayed for the attachment preview. */ | ||
isPreview?: boolean; | ||
}; | ||
|
||
function AttachmentOfflineIndicator({isPreview = false}: AttachmentOfflineIndicatorProps) { | ||
const theme = useTheme(); | ||
const styles = useThemeStyles(); | ||
const {isOffline} = useNetwork(); | ||
const {translate} = useLocalize(); | ||
|
||
// We don't want to show the offline indicator when the attachment is a cached one, so | ||
// we delay the display by 200 ms to ensure it is not a cached one. | ||
const [onCacheDelay, setOnCacheDelay] = useState(true); | ||
|
||
useEffect(() => { | ||
const timeout = setTimeout(() => setOnCacheDelay(false), 200); | ||
|
||
return () => clearTimeout(timeout); | ||
}, []); | ||
|
||
if (!isOffline || onCacheDelay) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<View style={[styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter, styles.pAbsolute, styles.h100, styles.w100, isPreview && styles.hoveredComponentBG]}> | ||
<Icon | ||
fill={theme.border} | ||
src={Expensicons.OfflineCloud} | ||
width={variables.iconSizeSuperLarge} | ||
height={variables.iconSizeSuperLarge} | ||
/> | ||
{!isPreview && ( | ||
<View> | ||
<Text style={[styles.notFoundTextHeader]}>{translate('common.youAppearToBeOffline')}</Text> | ||
<Text>{translate('common.attachementWillBeAvailableOnceBackOnline')}</Text> | ||
</View> | ||
)} | ||
</View> | ||
); | ||
} | ||
|
||
AttachmentOfflineIndicator.displayName = 'AttachmentOfflineIndicator'; | ||
|
||
export default AttachmentOfflineIndicator; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,11 +2,13 @@ import type {SyntheticEvent} from 'react'; | |
import React, {useCallback, useEffect, useRef, useState} from 'react'; | ||
import type {GestureResponderEvent, LayoutChangeEvent} from 'react-native'; | ||
import {View} from 'react-native'; | ||
import AttachmentOfflineIndicator from '@components/AttachmentOfflineIndicator'; | ||
import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; | ||
import Image from '@components/Image'; | ||
import RESIZE_MODES from '@components/Image/resizeModes'; | ||
import type {ImageOnLoadEvent} from '@components/Image/types'; | ||
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; | ||
import useNetwork from '@hooks/useNetwork'; | ||
import useStyleUtils from '@hooks/useStyleUtils'; | ||
import useThemeStyles from '@hooks/useThemeStyles'; | ||
import * as DeviceCapabilities from '@libs/DeviceCapabilities'; | ||
|
@@ -33,6 +35,7 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV | |
const [imgHeight, setImgHeight] = useState(0); | ||
const [zoomScale, setZoomScale] = useState(0); | ||
const [zoomDelta, setZoomDelta] = useState<ZoomDelta>(); | ||
const {isOffline} = useNetwork(); | ||
|
||
const scrollableRef = useRef<HTMLDivElement>(null); | ||
const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen(); | ||
|
@@ -210,7 +213,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV | |
onLoad={imageLoad} | ||
onError={onError} | ||
/> | ||
{(isLoading || zoomScale === 0) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />} | ||
{((isLoading && !isOffline) || (!isLoading && zoomScale === 0)) && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />} | ||
{isLoading && <AttachmentOfflineIndicator />} | ||
</View> | ||
); | ||
} | ||
|
@@ -243,7 +247,8 @@ function ImageView({isAuthTokenRequired = false, url, fileName, onError}: ImageV | |
/> | ||
</PressableWithoutFeedback> | ||
|
||
{isLoading && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />} | ||
{isLoading && !isOffline && <FullscreenLoadingIndicator style={[styles.opacity1, styles.bgTransparent]} />} | ||
{isLoading && <AttachmentOfflineIndicator />} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same with It's noticeable with refreshing the page will show the offline indicator first. Screen.Recording.2024-04-14.at.13.56.28.mov |
||
</View> | ||
); | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We should have also checked if the file is a localfile in case of offline upload, this caused #42657