show spinner only for each popup category

GlobalFishingWatch · Apr 10, 2024 · a503057 · a503057
1 parent 52ff919
commit a503057
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 149 deletions.
diff --git a/apps/fishing-map/features/map/map.slice.ts b/apps/fishing-map/features/map/map.slice.ts
@@ -493,7 +493,7 @@ const slice = createSlice({
       state.currentFishingRequestId = ''
       if (state?.clicked?.features?.length && action.payload?.vessels?.length) {
         state.clicked.features = state.clicked.features.map((feature: any) => {
-          const sublayers = (feature as FourwingsPickingObject).sublayers.map((sublayer) => {
+          const sublayers = (feature as FourwingsPickingObject).sublayers?.map((sublayer) => {
             const vessels =
               action.payload?.vessels.find((v) => v.sublayerId === sublayer.id)?.vessels || []
             return { ...sublayer, vessels }

diff --git a/apps/fishing-map/features/map/popups/ActivityLayers.tsx b/apps/fishing-map/features/map/popups/ActivityLayers.tsx
@@ -1,20 +1,19 @@
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Icon } from '@globalfishingwatch/ui-components'
-import { FourwingsDeckSublayer } from '@globalfishingwatch/deck-layers'
+import { Icon, Spinner } from '@globalfishingwatch/ui-components'
 import { DataviewCategory } from '@globalfishingwatch/api-types'
 import I18nNumber from 'features/i18n/i18nNumber'
-import { TooltipEventFeature } from 'features/map/map.hooks'
 import { SliceExtendedFourwingsDeckSublayer } from '../map.slice'
 import popupStyles from './Popup.module.css'
 import VesselsTable, { getVesselTableTitle } from './VesselsTable'
 
 type ActivityTooltipRowProps = {
   feature: SliceExtendedFourwingsDeckSublayer & { category: DataviewCategory }
+  loading?: boolean
   showFeaturesDetails: boolean
 }
 
-function ActivityTooltipRow({ feature, showFeaturesDetails }: ActivityTooltipRowProps) {
+function ActivityTooltipRow({ feature, showFeaturesDetails, loading }: ActivityTooltipRowProps) {
   const { t } = useTranslation()
   const title = getVesselTableTitle(feature)
   // TODO get the value based on the sublayer
@@ -36,8 +35,13 @@ function ActivityTooltipRow({ feature, showFeaturesDetails }: ActivityTooltipRow
               })}
             </span>
           </div>
+          {loading && (
+            <div className={popupStyles.loading}>
+              <Spinner size="small" />
+            </div>
+          )}
           {/* // TODO:deck add subcategory info */}
-          {showFeaturesDetails && (
+          {!loading && showFeaturesDetails && (
             <VesselsTable feature={feature} activityType={feature.subcategory} />
           )}
         </div>

diff --git a/apps/fishing-map/features/map/popups/DetectionsLayers.tsx b/apps/fishing-map/features/map/popups/DetectionsLayers.tsx
@@ -1,16 +1,21 @@
 import { Fragment } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Icon } from '@globalfishingwatch/ui-components'
+import { Icon, Spinner } from '@globalfishingwatch/ui-components'
 import I18nNumber from 'features/i18n/i18nNumber'
 import { TooltipEventFeature, TooltipEventFeatureVesselsInfo } from 'features/map/map.hooks'
 import VesselsTable, { VesselDetectionTimestamps } from 'features/map/popups/VesselsTable'
 import styles from './Popup.module.css'
 
 type ViirsMatchTooltipRowProps = {
   feature: TooltipEventFeature
+  loading?: boolean
   showFeaturesDetails: boolean
 }
-function ViirsMatchTooltipRow({ feature, showFeaturesDetails }: ViirsMatchTooltipRowProps) {
+function ViirsMatchTooltipRow({
+  feature,
+  showFeaturesDetails,
+  loading,
+}: ViirsMatchTooltipRowProps) {
   const { t } = useTranslation()
   // Avoid showing not matched detections
   const matchedVessels: TooltipEventFeatureVesselsInfo['vessels'] = (
@@ -50,7 +55,12 @@ function ViirsMatchTooltipRow({ feature, showFeaturesDetails }: ViirsMatchToolti
             )}
           </span>
         </div>
-        {showFeaturesDetails && (
+        {loading && (
+          <div className={styles.loading}>
+            <Spinner size="small" />
+          </div>
+        )}
+        {!loading && showFeaturesDetails && (
           <VesselsTable feature={featureVesselsFilter} vesselProperty="detections" />
         )}
       </div>