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; `