diff --git a/lib/components/narrative/loading.tsx b/lib/components/narrative/loading.tsx
index da279ccd2..bc417164b 100644
--- a/lib/components/narrative/loading.tsx
+++ b/lib/components/narrative/loading.tsx
@@ -4,13 +4,14 @@ import React from 'react'
import { StyledIconWrapper } from '../util/styledIcon'
type Props = {
+ extraSmall?: boolean
small?: boolean
}
-const Loading = ({ small }: Props): JSX.Element => {
+const Loading = ({ extraSmall, small }: Props): JSX.Element => {
return (
-
-
+
+
diff --git a/lib/components/viewers/nearby/nearby-view.tsx b/lib/components/viewers/nearby/nearby-view.tsx
index 1ff0cf82b..95ce4ccef 100644
--- a/lib/components/viewers/nearby/nearby-view.tsx
+++ b/lib/components/viewers/nearby/nearby-view.tsx
@@ -1,11 +1,16 @@
import { connect } from 'react-redux'
import { MapRef, useMap } from 'react-map-gl'
import { useIntl } from 'react-intl'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
import * as apiActions from '../../../actions/api'
-import { NearbySidebarContainer, Scrollable } from './styled'
+import {
+ FloatingLoadingIndicator,
+ NearbySidebarContainer,
+ Scrollable
+} from './styled'
+import Loading from '../../narrative/loading'
import RentalStation from './rental-station'
import Stop from './stop'
import Vehicle from './vehicle-rent'
@@ -45,26 +50,38 @@ function NearbyView(props: Props): JSX.Element {
const { fetchNearby, nearby, nearbyViewCoords } = props
const map = useMap().current
const intl = useIntl()
+ const [loading, setLoading] = useState(true)
const firstItemRef = useRef(null)
useEffect(() => {
firstItemRef.current?.scrollIntoView({ behavior: 'smooth' })
if (nearbyViewCoords) {
fetchNearby(nearbyViewCoords, map)
+ setLoading(true)
const interval = setInterval(() => {
fetchNearby(nearbyViewCoords, map)
- }, 2000)
+ setLoading(true)
+ }, 15000)
return function cleanup() {
clearInterval(interval)
}
}
}, [nearbyViewCoords])
+ useEffect(() => {
+ setLoading(false)
+ }, [nearby])
+
// TODO: when coordinates are set, put a marker on the map and zoom there
return (
-
-
+
+
+ {loading && (
+
+
+
+ )}
{nearby &&
(nearby.error
? intl.formatMessage({ id: 'components.NearbyView.error' })
diff --git a/lib/components/viewers/nearby/styled.tsx b/lib/components/viewers/nearby/styled.tsx
index 852ced946..313b328f9 100644
--- a/lib/components/viewers/nearby/styled.tsx
+++ b/lib/components/viewers/nearby/styled.tsx
@@ -1,10 +1,22 @@
import styled from 'styled-components'
+export const FloatingLoadingIndicator = styled.div`
+ position: fixed;
+ left: 0px;
+ margin: 5px;
+ aspect-ratio: 1;
+ padding: 3px;
+ background: white;
+ color: black;
+ border-radius: 1rem;
+`
+
export const NearbySidebarContainer = styled.div`
display: flex;
+ position: relative;
flex-direction: column;
gap: 3rem;
- padding: 3rem;
+ padding: 0 3rem;
overflow-y: scroll;
`