From 4da2761b26250e798260bcf637c504e4ba5f59e6 Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Tue, 2 Apr 2024 17:13:42 -0400
Subject: [PATCH] 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          | 17 +++++++++++++----
 www/js/diary/list/LabelListScreen.tsx |  5 +++--
 www/js/metrics/MetricsTab.tsx         |  2 +-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/www/js/components/NavBar.tsx b/www/js/components/NavBar.tsx
index 291f0b9e9..5b57472f8 100644
--- a/www/js/components/NavBar.tsx
+++ b/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();
diff --git a/www/js/diary/list/LabelListScreen.tsx b/www/js/diary/list/LabelListScreen.tsx
index bc3f16620..54df33500 100644
--- a/www/js/diary/list/LabelListScreen.tsx
+++ b/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}
diff --git a/www/js/metrics/MetricsTab.tsx b/www/js/metrics/MetricsTab.tsx
index 1e1625201..6d8744c85 100644
--- a/www/js/metrics/MetricsTab.tsx
+++ b/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"