@@ -69,33 +69,31 @@ const LoadingIndicator: React.FC<LoadingIndicatorProps & {theme: any}> = ({
6969 const numRasterTilesInProgress = getNumRasterTilesBeingLoaded ( ) ;
7070 const numVectorTilesInProgress = getNumVectorTilesBeingLoaded ( ) ;
7171
72- const rasterMessage =
73- numRasterTilesInProgress < 1
74- ? ''
75- : `${ numRasterTilesInProgress } raster tile${
76- numRasterTilesInProgress === 1 ? ' is' : 's are'
77- } being loaded`;
78-
79- const vectorMessage =
80- numVectorTilesInProgress < 1
81- ? ''
82- : `${ numVectorTilesInProgress } vector tile${
83- numVectorTilesInProgress === 1 ? ' is' : 's are'
84- } being loaded`;
85-
8672 let extraMessage = '' ;
87- if ( rasterMessage && vectorMessage ) {
88- extraMessage = `${ rasterMessage . replace ( ' being loaded' , '' ) } and ${ vectorMessage } ` ;
89- } else if ( rasterMessage ) {
90- extraMessage = rasterMessage ;
91- } else if ( vectorMessage ) {
92- extraMessage = vectorMessage ;
73+ if ( numRasterTilesInProgress > 0 && numVectorTilesInProgress > 0 ) {
74+ // Both types loading: show combined count
75+ const totalTiles = numRasterTilesInProgress + numVectorTilesInProgress ;
76+ extraMessage = `${ totalTiles } tile${ totalTiles === 1 ? ' is' : 's are' } being loaded` ;
77+ } else if ( numRasterTilesInProgress > 0 ) {
78+ // Only raster tiles loading
79+ extraMessage = `${ numRasterTilesInProgress } raster tile${
80+ numRasterTilesInProgress === 1 ? ' is' : 's are'
81+ } being loaded`;
82+ } else if ( numVectorTilesInProgress > 0 ) {
83+ // Only vector tiles loading
84+ extraMessage = `${ numVectorTilesInProgress } vector tile${
85+ numVectorTilesInProgress === 1 ? ' is' : 's are'
86+ } being loaded`;
9387 }
9488
9589 return (
9690 < StyledContainer $isVisible = { isVisible } $left = { left } >
97- < Spinner />
98- < span > { `Loading... ${ extraMessage } ` } </ span >
91+ { isVisible && (
92+ < >
93+ < Spinner />
94+ < span > { `Loading... ${ extraMessage } ` } </ span >
95+ </ >
96+ ) }
9997 </ StyledContainer >
10098 ) ;
10199} ;
0 commit comments