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 + } }