removed timeout - using post body loading flag to render footer content

This commit is contained in:
Nouman Tahir 2021-03-30 14:07:36 +05:00
parent 4032217c11
commit 78dc054f69
2 changed files with 26 additions and 16 deletions

View File

@ -31,6 +31,7 @@ const PostBody = ({
handleOnUserPress, handleOnUserPress,
handleOnPostPress, handleOnPostPress,
dispatch, dispatch,
onLoadEnd,
}) => { }) => {
const [isImageModalOpen, setIsImageModalOpen] = useState(false); const [isImageModalOpen, setIsImageModalOpen] = useState(false);
const [postImages, setPostImages] = useState([]); const [postImages, setPostImages] = useState([]);
@ -41,7 +42,7 @@ const PostBody = ({
const intl = useIntl(); const intl = useIntl();
const actionImage = useRef(null); const actionImage = useRef(null);
const actionLink = useRef(null); const actionLink = useRef(null);
const [isLoading, setIsLoading] = useState(true); // const [isLoading, setIsLoading] = useState(true);
useEffect(() => { useEffect(() => {
if (selectedLink) { if (selectedLink) {
@ -294,9 +295,9 @@ const PostBody = ({
}; };
const _handleLoadEnd = () => { const _handleLoadEnd = () => {
setTimeout(() => { if (onLoadEnd) {
setIsLoading(false); onLoadEnd();
}, 200); }
}; };
const customStyle = ` const customStyle = `
@ -461,7 +462,7 @@ const PostBody = ({
handleLinkPress(index); handleLinkPress(index);
}} }}
/> />
{isLoading && (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)} {/* {isLoading && (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)} */}
<AutoHeightWebView <AutoHeightWebView
source={{ html }} source={{ html }}
allowsFullscreenVideo={true} allowsFullscreenVideo={true}
@ -470,6 +471,7 @@ const PostBody = ({
onMessage={_handleOnLinkPress} onMessage={_handleOnLinkPress}
customScript={customBodyScript} customScript={customBodyScript}
startInLoadingState={true} startInLoadingState={true}
renderLoading={() => (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)}
onShouldStartLoadWithRequest={false} onShouldStartLoadWithRequest={false}
scrollEnabled={false} scrollEnabled={false}
scalesPageToFit={false} scalesPageToFit={false}

View File

@ -48,6 +48,7 @@ const PostDisplayView = ({
const [isLoadedComments, setIsLoadedComments] = useState(false); const [isLoadedComments, setIsLoadedComments] = useState(false);
const actionSheet = useRef(null); const actionSheet = useRef(null);
const [refreshing, setRefreshing] = useState(false); const [refreshing, setRefreshing] = useState(false);
const [postBodyLoading, setPostBodyLoading] = useState(false);
// Component Life Cycles // Component Life Cycles
useEffect(() => { useEffect(() => {
@ -59,6 +60,7 @@ const PostDisplayView = ({
// Component Functions // Component Functions
const onRefresh = useCallback(() => { const onRefresh = useCallback(() => {
setRefreshing(true); setRefreshing(true);
setPostBodyLoading(true);
fetchPost().then(() => setRefreshing(false)); fetchPost().then(() => setRefreshing(false));
}, [refreshing]); }, [refreshing]);
@ -183,6 +185,10 @@ const PostDisplayView = ({
); );
} }
const _handleOnPostBodyLoad = () => {
setPostBodyLoading(false);
};
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ScrollView <ScrollView
@ -207,20 +213,22 @@ const PostDisplayView = ({
content={post} content={post}
size={36} size={36}
/> />
<PostBody body={post.body} /> <PostBody body={post.body} onLoadEnd={_handleOnPostBodyLoad} />
<View style={styles.footer}> {!postBodyLoading && (
<Tags tags={post.json_metadata && post.json_metadata.tags} /> <View style={styles.footer}>
<Text style={styles.footerText}> <Tags tags={post.json_metadata && post.json_metadata.tags} />
Posted by <Text style={styles.footerText}>
<Text style={styles.footerName}>{` ${author || post.author} `}</Text> Posted by
{formatedTime} <Text style={styles.footerName}>{` ${author || post.author} `}</Text>
</Text> {formatedTime}
{/* {isPostEnd && this._getTabBar()} */} </Text>
</View> {/* {isPostEnd && this._getTabBar()} */}
</View>
)}
</View> </View>
)} )}
</View> </View>
{post && (isGetComment || isLoadedComments) && ( {post && !postBodyLoading && (isGetComment || isLoadedComments) && (
<CommentsDisplay <CommentsDisplay
author={author || post.author} author={author || post.author}
mainAuthor={author || post.author} mainAuthor={author || post.author}