setMapillaryId(null)}
+ url={activeMapillaryImage}
/>
)}
diff --git a/lib/components/map/mapillary-frame.tsx b/lib/components/map/mapillary-frame.tsx
index 795f8d48a..a0670af4c 100644
--- a/lib/components/map/mapillary-frame.tsx
+++ b/lib/components/map/mapillary-frame.tsx
@@ -1,23 +1,25 @@
import { Button } from 'react-bootstrap'
+// eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
+import { useIntl } from 'react-intl'
import React, { useEffect, useState } from 'react'
-// eslint-disable-next-line sort-imports-es6-autofix/sort-imports-es6
import Icon from '../util/icon'
const MapillaryFrame = ({
- id,
- onClose
+ onClose,
+ url
}: {
- id: string
onClose?: () => void
+ url: string
}): React.ReactElement => {
+ const intl = useIntl()
const [fakeLoad, setFakeLoad] = useState(false)
useEffect(() => {
// If the ID changed, show a "fake" loading screen to indicate to the user
// something is happening
setFakeLoad(true)
- setTimeout(() => setFakeLoad(false), 750)
- }, [id])
+ setTimeout(() => setFakeLoad(false), 500)
+ }, [url])
return (
@@ -31,16 +33,23 @@ const MapillaryFrame = ({
>
-
+ >
+
+