diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0df2703..50030ef 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,7 +10,7 @@
"typescriptreact"
],
"editor.codeActionsOnSave": {
- "source.fixAll.eslint": true
+ "source.fixAll.eslint": "explicit"
},
"editor.renderWhitespace": "all",
"editor.formatOnSave": true,
diff --git a/src/components/atoms/Text.jsx b/src/components/atoms/Text.jsx
index ef28ac5..30efb0a 100644
--- a/src/components/atoms/Text.jsx
+++ b/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`
diff --git a/src/components/molecules/Loading.jsx b/src/components/molecules/Loading.jsx
index f8139cf..7e3121a 100644
--- a/src/components/molecules/Loading.jsx
+++ b/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;
}
diff --git a/src/components/pages/Stats.jsx b/src/components/pages/Stats.jsx
index a84d8d6..4fdb516 100644
--- a/src/components/pages/Stats.jsx
+++ b/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() {
}>
{ historical_stats && }
+ { source == 'cache' &&
+
+ Updating historical data...
+ }
diff --git a/src/hooks/namespace.js b/src/hooks/namespace.js
index 78b6452..a9d230c 100644
--- a/src/hooks/namespace.js
+++ b/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
+ }
}