add small loading indicator to nearby view

opentripplanner · Oct 20, 2023 · c263329 · c263329
1 parent 78bd791
commit c263329
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git 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 (
-    <p className="text-center percy-hide" style={{ marginTop: '15px' }}>
-      <StyledIconWrapper size={small ? '3x' : '5x'} spin>
+    <p className="text-center percy-hide" style={{ margin: '0', padding: '0' }}>
+      <StyledIconWrapper size={small ? '3x' : extraSmall ? '1x' : '5x'} spin>
         <Redo />
       </StyledIconWrapper>
     </p>

diff --git 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<HTMLDivElement>(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 (
-    <Scrollable>
-      <div className="nearby-view" ref={firstItemRef} />
+    <Scrollable className="nearby-view base-color-bg">
       <NearbySidebarContainer className="base-color-bg">
+        <div ref={firstItemRef} />
+        {loading && (
+          <FloatingLoadingIndicator>
+            <Loading extraSmall />
+          </FloatingLoadingIndicator>
+        )}
         {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
@@ -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;
 `