add pulsing loading line at the bottom of NavBar

With the recent dashboard tab changes, we can show some preliminary metrics while lazy-loading additional trips. We need some way to communicate to the user that work is being done.

This will add a pulsing line animation (aka indeterminate progress bar) at the bottom of the NavBar whenever timelineIsLoading.

www/js/components/NavBar.tsx

@@ -1,13 +1,22 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import color from 'color';
-import { Appbar, Button, ButtonProps, Icon, useTheme } from 'react-native-paper';
+import { Appbar, Button, ButtonProps, Icon, ProgressBar, useTheme } from 'react-native-paper';
 
-const NavBar = ({ children }) => {
+type NavBarProps = { children: React.ReactNode; isLoading?: boolean };
+const NavBar = ({ children, isLoading }: NavBarProps) => {
   const { colors } = useTheme();
   return (
     <Appbar.Header statusBarHeight={0} elevated={true} style={s.navBar(colors.surface)}>
       {children}
+      <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 2 }}>
+        <ProgressBar
+          visible={isLoading}
+          indeterminate={true}
+          color={colors.primary}
+          style={{ height: 2 }}
+        />
+      </View>
     </Appbar.Header>
   );
 };
@@ -16,8 +25,8 @@ export default NavBar;
 
 // NavBarButton, a greyish button with outline, to be used inside a NavBar
 
-type Props = ButtonProps & { icon?: string; iconSize?: number };
-export const NavBarButton = ({ children, icon, iconSize, ...rest }: Props) => {
+type NavBarButtonProps = ButtonProps & { icon?: string; iconSize?: number };
+export const NavBarButton = ({ children, icon, iconSize, ...rest }: NavBarButtonProps) => {
   const { colors } = useTheme();
   const buttonColor = color(colors.onBackground).alpha(0.07).rgb().string();
   const outlineColor = color(colors.onBackground).alpha(0.2).rgb().string();

www/js/diary/list/LabelListScreen.tsx

@@ -12,12 +12,13 @@ import { displayErrorMsg } from '../../plugin/logger';
 
 const LabelListScreen = () => {
   const { filterInputs, setFilterInputs, displayedEntries } = useContext(LabelTabContext);
-  const { timelineMap, loadSpecificWeek, refreshTimeline } = useContext(TimelineContext);
+  const { timelineMap, loadSpecificWeek, timelineIsLoading, refreshTimeline } =
+    useContext(TimelineContext);
   const { colors } = useTheme();
 
   return (
     <>
-      <NavBar>
+      <NavBar isLoading={Boolean(timelineIsLoading)}>
         <FilterSelect
           filters={filterInputs}
           setFilters={setFilterInputs}

www/js/metrics/MetricsTab.tsx

@@ -140,7 +140,7 @@ const MetricsTab = () => {
 
   return (
     <>
-      <NavBar>
+      <NavBar isLoading={Boolean(timelineIsLoading)}>
         <Appbar.Content title={t('metrics.dashboard-tab')} />
         <DateSelect
           mode="range"