Merge pull request #47 from TimOrme/add_loading_indicators

Add loading indicators to graphs
TimOrme · Jun 3, 2023 · 7834a70 · 7834a70
2 parents 30cec36 + 5b8256b
commit 7834a70
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 5 deletions.
diff --git a/elm/src/Graph.elm b/elm/src/Graph.elm
@@ -15,6 +15,7 @@ type alias GraphReadModel =
     { graphData : List GraphReadData
     , currentHover : List (CI.One GraphReadData CI.Dot)
     , timeZone : Zone
+    , isLoading : Bool
     }
 
 
@@ -24,6 +25,7 @@ type alias GraphEpaModel =
     { graphData : List GraphEpaData
     , currentHover : List (CI.One GraphEpaData CI.Dot)
     , timeZone : Zone
+    , isLoading : Bool
     }
 
 
@@ -80,6 +82,19 @@ getReadChart graphModel onHover =
             ]
             [ CA.fontSize 12 -- Change font size
             ]
+        , htmlIf
+            (C.htmlAt .max
+                .max
+                -50
+                0
+                [ style "border" "1px solid gray"
+                , style "padding" "5px"
+                , style "font-size" "0.75em"
+                , style "background" "white"
+                ]
+                [ text "Loading..." ]
+            )
+            graphModel.isLoading
         ]
 
 
@@ -118,6 +133,19 @@ getEpaChart graphModel onHover =
             ]
             [ CA.fontSize 12 -- Change font size
             ]
+        , htmlIf
+            (C.htmlAt .max
+                .max
+                -50
+                0
+                [ style "border" "1px solid gray"
+                , style "padding" "5px"
+                , style "font-size" "0.75em"
+                , style "background" "white"
+                ]
+                [ text "Loading..." ]
+            )
+            graphModel.isLoading
         ]
 
 
@@ -247,3 +275,12 @@ monthToString month =
 
         Dec ->
             "12"
+
+
+htmlIf : C.Element data msg -> Bool -> C.Element data msg
+htmlIf el cond =
+    if cond then
+        el
+
+    else
+        C.none
diff --git a/elm/src/Main.elm b/elm/src/Main.elm
@@ -208,14 +208,14 @@ update msg model =
             -- On Data received
             case result of
                 Ok data ->
-                    ( { model | allReads = data.reads, allEpas = data.epas, errorData = { hasError = False, errorTitle = "", errorMessage = "" } }, Cmd.none )
+                    ( { model | allReads = data.reads, allEpas = data.epas, dataLoading = False, errorData = { hasError = False, errorTitle = "", errorMessage = "" } }, Cmd.none )
 
                 Err e ->
-                    ( { model | errorData = { hasError = True, errorTitle = "Failed to retrieve read data", errorMessage = errorToString e } }, Cmd.none )
+                    ( { model | dataLoading = False, errorData = { hasError = True, errorTitle = "Failed to retrieve read data", errorMessage = errorToString e } }, Cmd.none )
 
         FetchData newTime ->
             -- Data requested
-            ( { model | currentTime = Just newTime }, getData model.windowDuration )
+            ( { model | currentTime = Just newTime, dataLoading = True }, getData model.windowDuration )
 
         GetTimeZone timeZone ->
             ( { model | timeZone = timeZone }, Cmd.none )
@@ -365,7 +365,7 @@ view model =
                 (Grid.row [ Row.attrs [ style "padding-top" "1em", style "padding-bottom" "3em" ], Row.centerMd ]
                     [ Grid.col [ Col.lg ]
                         [ div [ style "height" "400px" ]
-                            [ G.getEpaChart { graphData = model.allEpas, currentHover = model.hoveringEpas, timeZone = model.timeZone } OnEpaHover ]
+                            [ G.getEpaChart { graphData = model.allEpas, currentHover = model.hoveringEpas, timeZone = model.timeZone, isLoading = model.dataLoading } OnEpaHover ]
                         ]
                     ]
                 )
@@ -374,7 +374,7 @@ view model =
                 (Grid.row [ Row.attrs [ style "padding-top" "1em", style "padding-bottom" "3em" ], Row.centerMd ]
                     [ Grid.col [ Col.lg ]
                         [ div [ style "height" "400px" ]
-                            [ G.getReadChart { graphData = model.allReads, currentHover = model.hoveringReads, timeZone = model.timeZone } OnReadHover ]
+                            [ G.getReadChart { graphData = model.allReads, currentHover = model.hoveringReads, timeZone = model.timeZone, isLoading = model.dataLoading } OnReadHover ]
                         ]
                     ]
                 )