✨ display loading status while historical data is recomputed

.vscode/settings.json

@@ -10,7 +10,7 @@
 		"typescriptreact"
 	],
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	},
 	"editor.renderWhitespace": "all",
 	"editor.formatOnSave": true,

src/components/atoms/Text.jsx

@@ -60,6 +60,9 @@ export const Sidenote = styled.p`
 	text-align: left;
 	overflow-wrap: anywhere;
 	font-size: ${ ( { size='.7rem' } ) => size };
+	display: flex;
+	align-items: center;
+	justify-content: ${ ( { justify='flex-start' } ) => justify };
 `
 
 export const Br = styled.span`

src/components/molecules/Loading.jsx

@@ -13,21 +13,21 @@ const rotate = keyframes`
 	}
 `
 
-export const Spinner = styled.div`
+export const Spinner = styled.span`
 	
 	display: inline-block;
-	width: 80px;
-	height: 80px;
-	margin: 2rem;
+	width: ${ ( { size=80 } ) => `${ size }px` };
+	height: ${ ( { size=80 } ) => `${ size }px` };
+	margin: ${ ( { margin, size=80 } ) => margin || `${ size * .2 }px` };
 
 	&:after {
 		content: " ";
 		display: block;
-		width: 64px;
-		height: 64px;
-		margin: 8px;
+		width: ${ ( { size=80 } ) => `${ size * .8 }px` };
+		height: ${ ( { size=80 } ) => `${ size * .8 }px` };
+		margin: 0;
 		border-radius: 50%;
-		border: 6px solid ${ ( { theme } ) => theme.colors.primary };
+		border: ${ ( { size=80 } ) => `${ size * .1 }px` } solid ${ ( { theme } ) => theme.colors.primary };
 		border-color: ${ ( { theme } ) => theme.colors.primary } transparent ${ ( { theme } ) => theme.colors.primary } transparent;
 		animation: ${ rotate } 1.2s linear infinite;
 	}

src/components/pages/Stats.jsx

@@ -15,7 +15,7 @@ export default function Stats() {
 
     const { namespace } = useParams()
     const stats = useStatsOfNamespace( namespace )
-    const historical_stats = useHistoricalStatsOfNamespace( namespace )
+    const { stats: historical_stats, source } = useHistoricalStatsOfNamespace( namespace )
 
     useEffect( () => {
         document.title = `${ capitalise( namespace ) }'s Unidentified Analytics`
@@ -42,6 +42,10 @@ export default function Stats() {
 
                 <Suspense fallback={ <Spinner /> }>
                     { historical_stats && <HistoryChart historical_stats={ historical_stats } /> }
+                    { source == 'cache' && <Sidenote>
+                        <Spinner margin="0 .5rem 0" size={ 10 } />
+                        Updating historical data...
+                    </Sidenote>}
                 </Suspense>
 
 

src/hooks/namespace.js

@@ -32,7 +32,8 @@ export const useStatsOfNamespace= ( namespace ) => {
 export const useHistoricalStatsOfNamespace = ( namespace ) => {
 
     const [ cached_stats, set_cached_stats ] = useState(  )
-    const [ stats, set_stats ] = useState(  )
+    const [ stats, set_stats ] = useState()
+    const [ source, set_source ] = useState( 'cache' )  
 
     useEffect( () => listen_to_document( `historical_stats`, namespace, cached_historical_data => {
         cached_historical_data?.history.sort( sort_by_updated_asc )
@@ -55,10 +56,13 @@ export const useHistoricalStatsOfNamespace = ( namespace ) => {
                 const cache_is_up_to_date = historical_stats?.updated == cached_stats?.updated
                 if( cache_is_up_to_date ) log( `Cache is as recent as received stats, keeping cache: `, cached_stats )
                 else log( `Cache out of date, setting updated historical data: `, historical_stats )
-                if( !cancelled && !cache_is_up_to_date ) set_stats( historical_stats )
+                if( cancelled || cache_is_up_to_date ) return
+                set_stats( historical_stats )
 
             } catch ( e ) {
                 log( `Error getting historical stats: `, e )
+            } finally {
+                set_source( 'live' )
             }
 
         } )( )
@@ -67,7 +71,10 @@ export const useHistoricalStatsOfNamespace = ( namespace ) => {
 
     }, [ namespace ] )
 
-    return stats || cached_stats
+    return {
+        stats: stats || cached_stats,
+        source
+    }
 
 }