add loading state

SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_timeline.scss

@@ -45,10 +45,19 @@
       justify-content: space-evenly;
     }
   }
+}
 
-  .hide-element {
-    display: none;
-  }
+.loading-overlay {
+  background: var(--gray-100);
+  opacity: 50%;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 14rem;
+}
+
+.hide-element {
+  display: none;
 }
 
 .timeline-view-toolbar {
@@ -619,14 +628,6 @@
   }
 }
 
-//.timeline-popover:before {
-//  display: none !important;
-//}
-//
-//.timeline-popover:after {
-//  display: none !important;
-//}
-
 .p-multiselect-header .p-multiselect-close {
   position: absolute;
   margin-left: -45px;

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/Filters.js

@@ -94,7 +94,6 @@ function changeDependentToggle(mainToggle, toggle, toggleToChangeValue, toggleTo
 }
 
 async function fetchReasons() {
-    console.log("fetching reasons")
     let reasons = []
     await UtilService.getReservationTemplates().then(templates => {
         const reservationTemplate = templates.length > 0 ? templates[0] : null; //use the first if there are templates found
@@ -133,12 +132,14 @@ export default function Filters(props) {
         //new
         startTime,
         endTime,
+        visibleStartTime,
         setReservations,
         timelineCommonUtils,
         timelineStore,
         schedulingUnits,
         setSchedulingUnits,
         groups,
+        setIsLoading,
         //old
         //fields below only needed for complete timeline
         stationsViewToggle,
@@ -169,8 +170,10 @@ export default function Filters(props) {
     useEffect(() => {
         if (reservationsViewToggle && reservationReasons.length === 0) {
             async function fetchReservationReasons() {
+                setIsLoading(true)
                 let reasons = await fetchReasons();
                 setReservationReasons(reasons)
+                setIsLoading(false)
                 //all values should be selected upon initialization
                 if (reservationFilter === undefined || reservationFilter.length === 0) {
                     setReservationFilter(reasons.map(reason => reason.name))
@@ -189,10 +192,12 @@ export default function Filters(props) {
 
         if (reservationsViewToggle && groups.length > 0) {
             async function fetchReservationItems() {
+                setIsLoading(true)
                 let reservations = await fetchReservations(startTime, endTime);
                 reservations = filterReservations(reservationFilter, reservations);
-                reservations = reservations.map(reservation => getReservationItem(reservation, endTime, timelineCommonUtils))
+                reservations = reservations.map(reservation => getReservationItem(reservation, visibleStartTime, timelineCommonUtils))
                 setReservations(reservations)
+                setIsLoading(false)
             }
 
             fetchReservationItems().catch(e => console.error("Couldn't get timeline reservations", e))
@@ -238,7 +243,6 @@ export default function Filters(props) {
     const shouldDisableSUToggle = stationsViewToggle ? !suToggle : false
 
     //stations view and on sky view cannot be shown together
-    // console.log("Rendering filters")
     return <div className="p-grid timeline-view-toolbar">
         <div className="section">
             <div className="header">Filters</div>

SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/toolbar/ZoomAndMove.js

@@ -85,7 +85,6 @@ export default function ZoomAndMove(props) {
         const selectedZoomLevel = UIConstants.ALL_ZOOM_LEVELS.find(level => level.name === zoomLevelName);
         if (selectedZoomLevel && setVisibleStartTime && setVisibleEndTime) {
             let zoomTimes = getZoomTimes(selectedZoomLevel, visibleStartTime);
-            console.log("zoomtimes", zoomTimes)
             if (zoomTimes.start && zoomTimes.end) {
                 setVisibleStartTime(zoomTimes.start)
                 setVisibleEndTime(zoomTimes.end)