feat: make tile loading indicator more explicit

src/components/src/loading-indicator.tsx

@@ -2,28 +2,48 @@
 // Copyright contributors to the kepler.gl project
 
 import React, {PropsWithChildren} from 'react';
-import styled, {withTheme} from 'styled-components';
+import styled, {withTheme, keyframes} from 'styled-components';
 
-import {getNumRasterTilesBeingLoaded} from '@kepler.gl/layers';
+import {getNumRasterTilesBeingLoaded, getNumVectorTilesBeingLoaded} from '@kepler.gl/layers';
 
 type StyledContainerProps = {
   $isVisible?: boolean;
   $left: number;
 };
 
+const spin = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+
+const Spinner = styled.div`
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 8px;
+  border: 2px solid ${props => props.theme.textColorHl};
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: ${spin} 0.8s linear infinite;
+  vertical-align: middle;
+`;
+
 export const StyledContainer = styled.div<StyledContainerProps>`
   position: absolute;
   left: ${props => props.$left}px;
   bottom: ${props => props.theme.sidePanel.margin.left}px;
-  z-index: 1;
-  color: ${props => props.theme.textColorHl};
+  z-index: 1000;
+  color: ${props => props.theme.textColor};
   opacity: ${props => (props.$isVisible ? 1 : 0)};
   transition: opacity 0.5s ease-in-out;
   background-color: ${props => props.theme.sidePanelBg};
-  border-radius: 0px;
-  padding-left: 3px;
-  padding-right: 3px;
-  font-size: 12px;
+  padding: 8px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
 `;
 
 type LoadingIndicatorProps = {
@@ -45,18 +65,37 @@ const LoadingIndicator: React.FC<LoadingIndicatorProps & {theme: any}> = ({
     (activeSidePanel ? (sidePanelWidth || 0) + LEFT_POSITION_ADJUSTMENT : 0) +
     theme.sidePanel.margin.left;
 
-  // Helper message to track number of raster tiles that are being loaded
+  // Helper message to track number of tiles that are being loaded
   const numRasterTilesInProgress = getNumRasterTilesBeingLoaded();
-  const extraMessage =
+  const numVectorTilesInProgress = getNumVectorTilesBeingLoaded();
+
+  const rasterMessage =
     numRasterTilesInProgress < 1
       ? ''
       : `${numRasterTilesInProgress} raster tile${
           numRasterTilesInProgress === 1 ? ' is' : 's are'
         } being loaded`;
 
+  const vectorMessage =
+    numVectorTilesInProgress < 1
+      ? ''
+      : `${numVectorTilesInProgress} vector tile${
+          numVectorTilesInProgress === 1 ? ' is' : 's are'
+        } being loaded`;
+
+  let extraMessage = '';
+  if (rasterMessage && vectorMessage) {
+    extraMessage = `${rasterMessage.replace(' being loaded', '')} and ${vectorMessage}`;
+  } else if (rasterMessage) {
+    extraMessage = rasterMessage;
+  } else if (vectorMessage) {
+    extraMessage = vectorMessage;
+  }
+
   return (
     <StyledContainer $isVisible={isVisible} $left={left}>
-      {`Loading... ${extraMessage}`}
+      <Spinner />
+      <span>{`Loading... ${extraMessage}`}</span>
     </StyledContainer>
   );
 };

src/layers/src/index.ts

@@ -43,7 +43,10 @@ export {default as AggregationLayer} from './aggregation-layer';
 import {default as VectorTileLayer} from './vector-tile/vector-tile-layer';
 
 export {default as VectorTileIcon} from './vector-tile/vector-tile-icon';
-export {default as VectorTileLayer} from './vector-tile/vector-tile-layer';
+export {
+  default as VectorTileLayer,
+  getNumVectorTilesBeingLoaded
+} from './vector-tile/vector-tile-layer';
 
 import {default as RasterTileLayer} from './raster-tile/raster-tile-layer';
 export {default as RasterTileIcon} from './raster-tile/raster-tile-icon';

src/layers/src/vector-tile/mvt-layer.ts

@@ -10,6 +10,7 @@ import {
   _TileLoadProps,
   _Tile2DHeader
 } from '@deck.gl/geo-layers/typed';
+import {incrementVectorTileLoading, decrementVectorTileLoading} from './vector-tile-layer';
 
 /*
   Custom MVT layer that works with MVTSource and PMTileSource.
@@ -22,14 +23,22 @@ import {
 
 // @ts-expect-error need to patch private methods because of newer loaders.gl
 export class MVTLayer<ExtraProps> extends _MVTLayer<ExtraProps> {
-  getTileData(tile: _TileLoadProps): any {
+  async getTileData(tile: _TileLoadProps): Promise<any> {
     const {getTileData} = this.props;
     const {data} = this.state;
 
     tile.url =
       typeof data === 'string' || Array.isArray(data) ? _getURLFromTemplate(data, tile) : null;
     if (getTileData) {
-      return getTileData(tile);
+      incrementVectorTileLoading();
+      try {
+        const result = await getTileData(tile);
+        decrementVectorTileLoading();
+        return result;
+      } catch (error) {
+        decrementVectorTileLoading();
+        throw error;
+      }
     }
     return null;
   }

src/layers/src/vector-tile/vector-tile-layer.ts

@@ -70,6 +70,22 @@ import {
   getPropertyByZoom
 } from './common-tile/tile-utils';
 
+// Global counter that represents the number of tiles currently being loaded across all the vector tile layers
+let vectorTilesBeingLoaded = 0;
+
+// This is a temp solution to track loading
+export const getNumVectorTilesBeingLoaded = () => {
+  return vectorTilesBeingLoaded;
+};
+
+export const incrementVectorTileLoading = () => {
+  vectorTilesBeingLoaded++;
+};
+
+export const decrementVectorTileLoading = () => {
+  vectorTilesBeingLoaded--;
+};
+
 export const DEFAULT_HIGHLIGHT_FILL_COLOR = [252, 242, 26, 150];
 export const DEFAULT_HIGHLIGHT_STROKE_COLOR = [252, 242, 26, 255];
 export const MAX_CACHE_SIZE_MOBILE = 1; // Minimize caching, visible tiles will always be loaded