Fix for some app freezes, ObsDetails (#1374)

* Fix freeze on ObsDetails when fetching remote observation

* Remote keepPreviousData function from react-query v5

Gemfile.lock

@@ -279,7 +279,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  activesupport (>= 6.1.7.3, < 7.1.0)
+  activesupport (>= 6.1.7.5, < 7.1.0)
   cocoapods (>= 1.13, < 1.15)
   fastlane
   nokogiri

ios/Podfile.lock

@@ -1452,12 +1452,12 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
   BVLinearGradient: 880f91a7854faff2df62518f0281afb1c60d49a3
-  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FasterImage: 60d0750ddbcefff0070c4c17309c2d1d6cc650f0
   FBLazyVector: f64d1e2ea739b4d8f7e4740cde18089cd97fe864
   FBReactNativeSpec: 9f2b8b243131565335437dba74923a8d3015e780
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
+  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 9cecf9953a681df7556b8cc9c74905de8f3293c0
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0

src/components/Explore/hooks/useInfiniteExploreScroll.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { searchObservations } from "api/observations";
 import { getJWT } from "components/LoginSignUp/AuthenticationService";
 import { flatten, last } from "lodash";
@@ -25,7 +25,6 @@ const useInfiniteExploreScroll = ( { params: newInputParams }: Object ): Object
   } = useInfiniteQuery( {
     // eslint-disable-next-line
     queryKey,
-    placeholderData: keepPreviousData,
     queryFn: async ( { pageParam } ) => {
       const apiToken = await getJWT( );
       const options = {

src/components/ObsDetails/ObsDetailsContainer.js

@@ -134,9 +134,10 @@ const ObsDetailsContainer = ( ): Node => {
 
   const localObservation = useLocalObservation( uuid );
 
-  const fetchRemoteObservationEnabled = (
+  const fetchRemoteObservationEnabled = !!(
     !remoteObsWasDeleted
     && ( !localObservation || localObservation?.wasSynced( ) )
+    && isOnline
   );
 
   const {

src/components/SharedComponents/SpeciesSeenCheckmark.js

@@ -1,8 +1,5 @@
 // @flow
 
-import {
-  keepPreviousData
-} from "@tanstack/react-query";
 import {
   searchObservations
 } from "api/observations";
@@ -46,7 +43,6 @@ const SpeciesSeenCheckmark = ( {
       optsWithAuth
     ),
     {
-      placeholderData: keepPreviousData,
       enabled: !!taxonId && !!currentUser?.id
     }
   );

src/sharedHooks/useInfiniteNotificationsScroll.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { fetchObservationUpdates } from "api/observations";
 import { getJWT } from "components/LoginSignUp/AuthenticationService";
 import { flatten } from "lodash";
@@ -20,7 +20,6 @@ const useInfiniteNotificationsScroll = ( ): Object => {
 
   const infQueryResult = useInfiniteQuery( {
     queryKey: ["useInfiniteNotificationsScroll"],
-    placeholderData: keepPreviousData,
     queryFn: async ( { pageParam } ) => {
       const apiToken = await getJWT( );
       const options = {

src/sharedHooks/useInfiniteObservationsScroll.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { searchObservations } from "api/observations";
 import { getJWT } from "components/LoginSignUp/AuthenticationService";
 import { flatten, last, noop } from "lodash";
@@ -35,7 +35,6 @@ const useInfiniteObservationsScroll = ( { upsert, params: newInputParams }: Obje
   } = useInfiniteQuery( {
     // eslint-disable-next-line
     queryKey,
-    placeholderData: keepPreviousData,
     queryFn: async ( { pageParam } ) => {
       const apiToken = await getJWT( );
       const options = {

src/sharedHooks/useInfiniteScroll.js

@@ -1,6 +1,6 @@
 // @flow
 
-import { keepPreviousData, useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { flatten } from "lodash";
 
 const useInfiniteScroll = (
@@ -22,7 +22,6 @@ const useInfiniteScroll = (
   } = useInfiniteQuery( {
     // eslint-disable-next-line
     queryKey: [queryKey, baseParams],
-    placeholderData: keepPreviousData,
     queryFn: async ( { pageParam = 0 } ) => {
       const params = {
         ...baseParams

src/sharedHooks/useRemoteObservation.js

@@ -1,12 +1,9 @@
 // @flow
-import {
-  keepPreviousData
-} from "@tanstack/react-query";
 import { fetchRemoteObservation } from "api/observations";
 import { RealmContext } from "providers/contexts";
-import { useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import Observation from "realmModels/Observation";
-import { useAuthenticatedQuery, useCurrentUser, useIsConnected } from "sharedHooks";
+import { useAuthenticatedQuery, useCurrentUser } from "sharedHooks";
 
 const { useRealm } = RealmContext;
 
@@ -20,7 +17,6 @@ const useRemoteObservation = ( uuid: string, enabled: boolean ): Object => {
 
   const currentUser = useCurrentUser( );
   const realm = useRealm( );
-  const isConnected = useIsConnected( );
 
   const {
     data: remoteObservation,
@@ -37,27 +33,29 @@ const useRemoteObservation = ( uuid: string, enabled: boolean ): Object => {
       optsWithAuth
     ),
     {
-      placeholderData: keepPreviousData,
-      enabled: !!isConnected && !!enabled
+      enabled
     }
   );
 
+  const needsLocalUpdate = remoteObservation
+    && currentUser
+    && remoteObservation?.user?.id === currentUser.id;
+
+  const updateLocalObservation = useCallback( ( ) => {
+    Observation.upsertRemoteObservations(
+      [remoteObservation],
+      realm
+    );
+  }, [remoteObservation, realm] );
+
   // Update local copy of a user's own observation
   useEffect( ( ) => {
-    if (
-      remoteObservation
-      && currentUser
-      && remoteObservation?.user?.id === currentUser.id
-    ) {
-      Observation.upsertRemoteObservations(
-        [remoteObservation],
-        realm
-      );
+    if ( needsLocalUpdate ) {
+      updateLocalObservation( );
     }
   }, [
-    currentUser,
-    realm,
-    remoteObservation
+    needsLocalUpdate,
+    updateLocalObservation
   ] );
 
   return {