Page MenuHomePhorge
Files F33332719

D7232.1768890842.diff
No OneTemporary
Actions

Size
4 KB
Referenced Files
None
Subscribers
None

D7232.1768890842.diff
View Options

diff --git a/native/media/loadable-image.react.js b/native/media/loadable-image.react.js
new file mode 100644
--- /dev/null
+++ b/native/media/loadable-image.react.js
@@ -0,0 +1,71 @@
+// @flow
+
+import { Image } from 'expo-image';
+import * as React from 'react';
+import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
+
+import type { ImageStyle } from '../types/styles.js';
+
+type Props = {
+ +source: ?ImageSource,
+ +onLoad: () => void,
+ +spinnerColor: string,
+ +style: ImageStyle,
+ +invisibleLoad: boolean,
+};
+function LoadableImage(props: Props): React.Node {
+ const { source, onLoad: onLoadProp } = props;
+
+ const [loaded, setLoaded] = React.useState(false);
+
+ const onLoad = React.useCallback(() => {
+ setLoaded(true);
+ onLoadProp && onLoadProp();
+ }, [onLoadProp]);
+
+ const invisibleStyle = React.useMemo(
+ () => [props.style, styles.invisible],
+ [props.style],
+ );
+
+ if (!loaded && props.invisibleLoad) {
+ return <Image source={source} onLoad={onLoad} style={invisibleStyle} />;
+ }
+
+ let spinner;
+ if (!loaded) {
+ spinner = (
+ <View style={styles.spinnerContainer}>
+ <ActivityIndicator color={props.spinnerColor} size="large" />
+ </View>
+ );
+ }
+
+ return (
+ <View style={styles.container}>
+ {spinner}
+ <Image source={source} onLoad={onLoad} style={props.style} />
+ </View>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+ invisible: {
+ opacity: 0,
+ },
+ spinnerContainer: {
+ alignItems: 'center',
+ bottom: 0,
+ justifyContent: 'center',
+ left: 0,
+ position: 'absolute',
+ right: 0,
+ top: 0,
+ },
+});
+
+export default LoadableImage;
diff --git a/native/media/remote-image.react.js b/native/media/remote-image.react.js
--- a/native/media/remote-image.react.js
+++ b/native/media/remote-image.react.js
@@ -1,11 +1,10 @@
// @flow
-import { Image } from 'expo-image';
import * as React from 'react';
-import { View, StyleSheet, ActivityIndicator } from 'react-native';
import { type ConnectionStatus } from 'lib/types/socket-types.js';
+import LoadableImage from './loadable-image.react.js';
import { useSelector } from '../redux/redux-utils.js';
import type { ImageStyle } from '../types/styles.js';
@@ -22,17 +21,16 @@
};
type State = {
+attempt: number,
- +loaded: boolean,
};
class RemoteImage extends React.PureComponent<Props, State> {
+ loaded: boolean = false;
state: State = {
attempt: 0,
- loaded: false,
};
- componentDidUpdate(prevProps: Props, prevState: State) {
+ componentDidUpdate(prevProps: Props) {
if (
- !this.state.loaded &&
+ !this.loaded &&
this.props.connectionStatus === 'connected' &&
prevProps.connectionStatus !== 'connected'
) {
@@ -40,73 +38,30 @@
attempt: otherPrevState.attempt + 1,
}));
}
- if (this.state.loaded && !prevState.loaded) {
- this.props.onLoad && this.props.onLoad(this.props.uri);
- }
}
render() {
- const source = { uri: this.props.uri };
- if (this.state.loaded) {
- return (
- <Image
- source={source}
- onLoad={this.onLoad}
- style={this.props.style}
- key={this.state.attempt}
- />
- );
- }
-
- if (this.props.invisibleLoad) {
- return (
- <Image
- source={source}
- onLoad={this.onLoad}
- style={[this.props.style, styles.invisible]}
- key={this.state.attempt}
- />
- );
- }
+ const { style, spinnerColor, invisibleLoad, uri } = this.props;
+ const source = { uri };
return (
- <View style={styles.container}>
- <View style={styles.spinnerContainer}>
- <ActivityIndicator color={this.props.spinnerColor} size="large" />
- </View>
- <Image
- source={source}
- onLoad={this.onLoad}
- style={this.props.style}
- key={this.state.attempt}
- />
- </View>
+ <LoadableImage
+ source={source}
+ onLoad={this.onLoad}
+ spinnerColor={spinnerColor}
+ style={style}
+ invisibleLoad={invisibleLoad}
+ key={this.state.attempt}
+ />
);
}
onLoad = () => {
- this.setState({ loaded: true });
+ this.loaded = true;
+ this.props.onLoad && this.props.onLoad(this.props.uri);
};
}
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- },
- invisible: {
- opacity: 0,
- },
- spinnerContainer: {
- alignItems: 'center',
- bottom: 0,
- justifyContent: 'center',
- left: 0,
- position: 'absolute',
- right: 0,
- top: 0,
- },
-});
-
const ConnectedRemoteImage: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedRemoteImage(props: BaseProps) {
const connectionStatus = useSelector(state => state.connection.status);

File Metadata

Mime Type
text/plain
Expires
Tue, Jan 20, 6:34 AM (7 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5959735
Default Alt Text
D7232.1768890842.diff (4 KB)

Event Timeline