From 0ab52f0c24bd2577b66ef3303f7d6c3004e0c0af Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sat, 18 Mar 2023 14:24:48 -0500
Subject: [PATCH] fix(gui): add progress bar to menus while loading (#216)

---
 gui/src/components/input/QueryList.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/gui/src/components/input/QueryList.tsx b/gui/src/components/input/QueryList.tsx
index 548968a9..704db7ec 100644
--- a/gui/src/components/input/QueryList.tsx
+++ b/gui/src/components/input/QueryList.tsx
@@ -1,5 +1,5 @@
 import { doesExist, mustDefault, mustExist } from '@apextoaster/js-utils';
-import { Alert, FormControl, InputLabel, MenuItem, Select, Typography } from '@mui/material';
+import { Alert, FormControl, FormLabel, InputLabel, LinearProgress, MenuItem, Select, Typography } from '@mui/material';
 import * as React from 'react';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -50,6 +50,7 @@ export function filterQuery<T>(query: QueryListComplete | QueryListFilter<T>, sh
 export function QueryList<T>(props: QueryListProps<T>) {
   const { labelKey, query, showEmpty = false, value } = props;
   const { result } = query;
+  const labelID = `query-list-${props.id}-labels`;
 
   const { t } = useTranslation();
 
@@ -86,7 +87,10 @@ export function QueryList<T>(props: QueryListProps<T>) {
   }
 
   if (result.status === 'loading') {
-    return <Typography>{t('input.list.loading')}</Typography>;
+    return <FormControl>
+      <FormLabel id={labelID}>{props.name}</FormLabel>
+      <LinearProgress />
+    </FormControl>;
   }
 
   if (result.status === 'idle') {
@@ -94,7 +98,6 @@ export function QueryList<T>(props: QueryListProps<T>) {
   }
 
   // else: success
-  const labelID = `query-list-${props.id}-labels`;
   const data = filterQuery(query, showEmpty);
 
   return <FormControl>