Add location loading notes

web/components/gidx/location-monitor.tsx

@@ -4,6 +4,7 @@ import { User } from 'common/user'
 import { Col } from '../layout/col'
 import { Contract } from 'common/contract'
 import { TRADE_TERM } from 'common/envs/constants'
+import { useState, useEffect } from 'react'
 
 export const LocationMonitor = (props: {
   contract: Contract
@@ -30,6 +31,9 @@ export const LocationMonitor = (props: {
       }
     }
   )
+
+  const showLoadingNote = useShowAfterLoadingTime(loading, 5)
+
   if (!user || !showPanel || !user.idVerified) {
     return null
   }
@@ -43,9 +47,42 @@ export const LocationMonitor = (props: {
           Share location to {TRADE_TERM}
         </Button>
       </div>
+      {showLoadingNote && (
+        <span className="text-warning mt-2">
+          Loading location may take a while, hold on!
+        </span>
+      )}
       {monitorStatus === 'error' && (
         <span className="mt-2 text-red-500">{monitorStatusMessage}</span>
       )}
     </Col>
   )
 }
+
+export const useShowAfterLoadingTime = (
+  loading: boolean,
+  thresholdMS: number
+) => {
+  const [loadingTime, setLoadingTime] = useState(0)
+  const [showLoadingNote, setShowLoadingNote] = useState(false)
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout
+    if (loading) {
+      timer = setInterval(() => {
+        setLoadingTime((prev) => prev + 1)
+      }, 1000)
+    } else {
+      setLoadingTime(0)
+      setShowLoadingNote(false)
+    }
+
+    if (loadingTime > thresholdMS) {
+      setShowLoadingNote(true)
+    }
+
+    return () => clearInterval(timer)
+  }, [loading, loadingTime, thresholdMS])
+
+  return showLoadingNote
+}

web/components/gidx/location-panel.tsx

@@ -6,6 +6,8 @@ import { useLocation } from 'web/hooks/use-location'
 import { LoadingIndicator } from '../widgets/loading-indicator'
 import { useEffect } from 'react'
 import { useNativeInfo } from '../native-message-provider'
+import { useShowAfterLoadingTime } from './location-monitor'
+import { Col } from '../layout/col'
 
 export const LocationPanel = (props: {
   setLocation: (data: GPSData) => void
@@ -24,6 +26,8 @@ export const LocationPanel = (props: {
     back,
   } = props
   const { isNative } = useNativeInfo()
+  const showLoadingNote = useShowAfterLoadingTime(loading, 5)
+
   const { requestLocation, checkLocationPermission } = useLocation(
     setLocationError,
     setLoading,
@@ -40,7 +44,16 @@ export const LocationPanel = (props: {
   }, [])
 
   if (loading) {
-    return <LoadingIndicator />
+    return (
+      <Col>
+        <LoadingIndicator />
+        {showLoadingNote && (
+          <span className="text-warning mt-2">
+            Loading location may take a while, hold on!
+          </span>
+        )}
+      </Col>
+    )
   }
 
   return (