Merge pull request #5458 from concourse/issue/2935-master

web: behaviour: add loading view to dashboard

Author: aoldershaw

release-notes/latest.md

@@ -57,3 +57,8 @@
 
 [RFC #33]: https://github.com/concourse/rfcs/pull/33
 
+#### <sub><sup><a name="5458" href="#5458">:link:</a></sup></sub> feature
+
+* Add loading indicator on dashboard while awaiting initial API/cache response. #5458
+
+

web/elm/src/Dashboard/Dashboard.elm

@@ -66,6 +66,7 @@ import SideBar.SideBar as SideBar
 import StrictEvents exposing (onScroll)
 import Time
 import UserState
+import Views.Spinner as Spinner
 import Views.Styles
 
 
@@ -766,7 +767,19 @@ dashboardView session model =
                 :: onScroll Scrolled
                 :: Styles.content model.highDensity
             )
-            (welcomeCard session model :: pipelinesView session model)
+            (if model.pipelines == None then
+                [ loadingView ]
+
+             else
+                welcomeCard session model :: pipelinesView session model
+            )
+
+
+loadingView : Html Message
+loadingView =
+    Html.div
+        (class "loading" :: Styles.loadingView)
+        [ Spinner.spinner { sizePx = 36, margin = "0" } ]
 
 
 welcomeCard :

web/elm/src/Dashboard/Styles.elm

@@ -17,6 +17,7 @@ module Dashboard.Styles exposing
     , legend
     , legendItem
     , legendSeparator
+    , loadingView
     , noPipelineCard
     , noPipelineCardHd
     , noPipelineCardHeader
@@ -796,3 +797,13 @@ clusterName =
     , style "letter-spacing" "0.1em"
     , style "margin-left" "10px"
     ]
+
+
+loadingView : List (Html.Attribute msg)
+loadingView =
+    [ style "display" "flex"
+    , style "justify-content" "center"
+    , style "align-items" "center"
+    , style "width" "100%"
+    , style "height" "100%"
+    ]

web/elm/tests/DashboardCacheTests.elm

@@ -116,17 +116,6 @@ all =
                     |> Common.queryView
                     |> Query.find [ class "pipeline-wrapper" ]
                     |> Query.has [ class "parallel-grid" ]
-        , test "renders team sections when receive cached teams delivery" <|
-            \_ ->
-                Common.init "/"
-                    |> Application.handleDelivery
-                        (CachedTeamsReceived <|
-                            Ok <|
-                                [ { id = 0, name = "team-0" } ]
-                        )
-                    |> Tuple.first
-                    |> Common.queryView
-                    |> Query.has [ class "dashboard-team-group", containing [ text "team-0" ] ]
         , test "ignores the job cache after fetching successfully" <|
             \_ ->
                 Common.init "/"

web/elm/tests/DashboardTests.elm

@@ -347,6 +347,34 @@ all =
                     |> Common.queryView
                     |> Query.find [ id "top-bar-app" ]
                     |> Query.has [ style "height" "54px" ]
+        , describe "loading section" <|
+            [ test "has a loading section when awaiting API data" <|
+                \_ ->
+                    Common.init "/"
+                        |> Common.queryView
+                        |> Query.has [ class "loading" ]
+            , test "centers spinner" <|
+                \_ ->
+                    Common.init "/"
+                        |> Common.queryView
+                        |> Query.has
+                            [ style "display" "flex"
+                            , style "justify-content" "center"
+                            , style "align-items" "center"
+                            , style "width" "100%"
+                            , style "height" "100%"
+                            ]
+            , test "contains a spinner" <|
+                \_ ->
+                    Common.init "/"
+                        |> Common.queryView
+                        |> Query.find [ class "loading" ]
+                        |> Query.has
+                            [ style "animation" "container-rotate 1568ms linear infinite"
+                            , style "height" "36px"
+                            , style "width" "36px"
+                            ]
+            ]
         , test "high density view has no vertical scroll" <|
             \_ ->
                 whenOnDashboard { highDensity = True }