Skip to content
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.

Sign up for GitHub

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 image attachment infinite loading #15472

Merged
merged 1 commit into from
Feb 24, 2023
Merged

fix image attachment infinite loading #15472

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
138 changes: 67 additions & 71 deletions src/components/ImageView/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ class ImageView extends PureComponent {
super(props);

this.state = {
isLoading: false,
isLoading: true,
imageWidth: 0,
imageHeight: 0,
interactionPromise: undefined,
Expand All @@ -52,7 +52,6 @@ class ImageView extends PureComponent {
onStartShouldSetPanResponder: this.updatePanResponderTouches.bind(this),
});

this.imageLoadStart = this.imageLoadStart.bind(this);
this.configureImageZoom = this.configureImageZoom.bind(this);
}

Expand All @@ -79,10 +78,6 @@ class ImageView extends PureComponent {
return false;
}

imageLoadStart() {
this.setState({isLoading: true});
}

/**
* The `ImageZoom` component requires image dimensions which
* are calculated here from the natural image dimensions produced by
Expand Down Expand Up @@ -137,71 +132,72 @@ class ImageView extends PureComponent {
});
}}
>
<ImageZoom
ref={el => this.zoom = el}
cropWidth={this.props.windowWidth}
cropHeight={windowHeight}
imageWidth={this.state.imageWidth}
imageHeight={this.state.imageHeight}
onStartShouldSetPanResponder={() => {
const isDoubleClick = new Date().getTime() - this.lastClickTime <= this.doubleClickInterval;
this.lastClickTime = new Date().getTime();

// Let ImageZoom handle the event if the tap is more than one touchPoint or if we are zoomed in
if (this.amountOfTouches === 2 || this.imageZoomScale !== 1) {
return true;
}

// When we have a double click and the zoom scale is 1 then programmatically zoom the image
// but let the tap fall through to the parent so we can register a swipe down to dismiss
if (isDoubleClick) {
this.zoom.centerOn({
x: 0,
y: 0,
scale: 2,
duration: 100,
});
}

// We must be either swiping down or double tapping since we are at zoom scale 1
return false;
}}
onMove={({scale}) => {
this.imageZoomScale = scale;
}}
>
<Image
style={[
styles.w100,
styles.h100,
this.props.style,

// Hide image while loading so ImageZoom can get the image
// size before presenting - preventing visual glitches or shift
// due to ImageZoom
shouldShowLoadingIndicator ? styles.opacity0 : styles.opacity1,
]}
source={{uri: this.props.url}}
isAuthTokenRequired={this.props.isAuthTokenRequired}
resizeMode={Image.resizeMode.contain}
onLoadStart={this.imageLoadStart}
onLoad={this.configureImageZoom}
/>
{/**
Create an invisible view on top of the image so we can capture and set the amount of touches before
the ImageZoom's PanResponder does. Children will be triggered first, so this needs to be inside the
ImageZoom to work
*/}
<View
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...this.panResponder.panHandlers}
style={[
styles.w100,
styles.h100,
styles.invisible,
]}
/>
</ImageZoom>
{this.state.containerHeight && (
<ImageZoom
ref={el => this.zoom = el}
cropWidth={this.props.windowWidth}
cropHeight={windowHeight}
imageWidth={this.state.imageWidth}
imageHeight={this.state.imageHeight}
onStartShouldSetPanResponder={() => {
const isDoubleClick = new Date().getTime() - this.lastClickTime <= this.doubleClickInterval;
this.lastClickTime = new Date().getTime();

// Let ImageZoom handle the event if the tap is more than one touchPoint or if we are zoomed in
if (this.amountOfTouches === 2 || this.imageZoomScale !== 1) {
return true;
}

// When we have a double click and the zoom scale is 1 then programmatically zoom the image
// but let the tap fall through to the parent so we can register a swipe down to dismiss
if (isDoubleClick) {
this.zoom.centerOn({
x: 0,
y: 0,
scale: 2,
duration: 100,
});
}

// We must be either swiping down or double tapping since we are at zoom scale 1
return false;
}}
onMove={({scale}) => {
this.imageZoomScale = scale;
}}
>
<Image
style={[
styles.w100,
styles.h100,
this.props.style,

// Hide image while loading so ImageZoom can get the image
// size before presenting - preventing visual glitches or shift
// due to ImageZoom
shouldShowLoadingIndicator ? styles.opacity0 : styles.opacity1,
]}
source={{uri: this.props.url}}
isAuthTokenRequired={this.props.isAuthTokenRequired}
resizeMode={Image.resizeMode.contain}
onLoad={this.configureImageZoom}
/>
{/**
Create an invisible view on top of the image so we can capture and set the amount of touches before
the ImageZoom's PanResponder does. Children will be triggered first, so this needs to be inside the
ImageZoom to work
*/}
<View
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...this.panResponder.panHandlers}
style={[
styles.w100,
styles.h100,
styles.invisible,
]}
/>
</ImageZoom>
)}
{shouldShowLoadingIndicator && (
<FullscreenLoadingIndicator
style={[styles.opacity1, styles.bgTransparent]}
Expand Down