ui: show dbStats when available #57

azimut · Sep 28, 2024 · d4e851a · d4e851a
1 parent 33fd3f0
commit d4e851a
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 53 deletions.
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -102,6 +102,9 @@
         display: flex;
         flex-direction: column;
       }
+      svg {
+        margin: 0 auto; /* center spinner when bare on main */
+      }
       div.some-results {
         display: flex;
         flex-direction: row;

diff --git a/frontend/src/Main.elm b/frontend/src/Main.elm
@@ -543,93 +543,117 @@ viewFooter =
 
 
 viewStats : Model -> Html Msg
-viewStats { dbStats, feeds } =
+viewStats { dbStats } =
     case dbStats of
         Nothing ->
-            div [ class "some-results" ]
-                [ Loaders.ballTriangle 150 "#fff" ]
+            text ""
 
         Just { nPodcasts, nEntries, dbSize } ->
-            case feeds of
+            div [ class "some-results" ]
+                [ div [] [ text (fromInt nPodcasts ++ " podcasts,") ]
+                , div [] [ text (fromInt nEntries ++ " episodes,") ]
+                , div [] [ text (Filesize.format dbSize) ]
+                ]
+
+
+viewMain : Model -> Html Msg
+viewMain ({ state, dbStats } as model) =
+    case state of
+        Error ->
+            main_ [] [ div [ class "some-results" ] [ text "ERROR x(" ] ]
+
+        Starting ->
+            case dbStats of
+                Nothing ->
+                    main_ [] [ div [ class "some-results" ] [ Loaders.ballTriangle 150 "#fff" ] ]
+
+                Just _ ->
+                    main_ []
+                        [ viewStats model
+                        , if List.isEmpty model.feeds then
+                            Loaders.ballTriangle 150 "#fff"
+
+                          else
+                            text ""
+                        ]
+
+        Idle ->
+            main_ [] <|
+                viewStats model
+                    :: List.map (\feed -> viewFeed feed state model.now model.entries) model.feeds
+
+        WaitingForResults ->
+            main_ []
+                [ div [ class "loader-search" ]
+                    [ Loaders.ballTriangle 60 "#fff" ]
+                ]
+
+        ShowingResults ->
+            let
+                filteredFeeds =
+                    List.filter .isVisible model.feeds
+            in
+            case filteredFeeds of
                 [] ->
-                    div [ class "some-results" ]
-                        [ Loaders.ballTriangle 150 "#fff" ]
+                    main_ []
+                        [ div [ class "no-results" ] [ text "no results found :(" ] ]
 
                 _ ->
-                    div [ class "some-results" ]
-                        [ div [] [ text (fromInt nPodcasts ++ " podcasts,") ]
-                        , div [] [ text (fromInt nEntries ++ " episodes,") ]
-                        , div [] [ text (Filesize.format dbSize) ]
-                        ]
+                    let
+                        nResults =
+                            List.foldl (\f acc -> f.nResults + acc) 0 filteredFeeds
+
+                        message =
+                            case nResults of
+                                1 ->
+                                    fromInt nResults ++ " result found"
+
+                                _ ->
+                                    fromInt nResults ++ " results found"
+                    in
+                    main_ [] <|
+                        let
+                            feedIds =
+                                OrderedDict.keys model.entries |> List.reverse
+                        in
+                        div [ class "some-results" ] [ text message ]
+                            :: List.map
+                                (\feed -> viewFeed feed state model.now model.entries)
+                                (sortFeeds model.feeds feedIds [])
 
 
 view : Model -> Html Msg
-view ({ feeds, entries, state, now } as model) =
-    case state of
+view model =
+    case model.state of
         Error ->
             div []
                 [ viewHeader model
-                , main_ []
-                    [ div [ class "some-results" ] [ text "ERROR x(" ]
-                    ]
+                , viewMain model
                 ]
 
         Starting ->
             div []
                 [ viewHeader model
-                , main_ [] [ viewStats model ]
+                , viewMain model
                 ]
 
         Idle ->
             div []
                 [ viewHeader model
-                , main_ [] <|
-                    viewStats model
-                        :: List.map (\feed -> viewFeed feed state now entries) feeds
+                , viewMain model
                 , viewFooter
                 ]
 
         WaitingForResults ->
             div []
                 [ viewHeader model
-                , div [ class "loader-search" ]
-                    [ Loaders.ballTriangle 60 "#fff" ]
+                , viewMain model
                 ]
 
         ShowingResults ->
-            let
-                filteredFeeds =
-                    List.filter .isVisible feeds
-            in
             div []
                 [ viewHeader model
-                , case filteredFeeds of
-                    [] ->
-                        main_ []
-                            [ div [ class "no-results" ] [ text "no results found :(" ] ]
-
-                    _ ->
-                        let
-                            nResults =
-                                List.foldl (\f acc -> f.nResults + acc) 0 filteredFeeds
-
-                            message =
-                                case nResults of
-                                    1 ->
-                                        fromInt nResults ++ " result found"
-
-                                    _ ->
-                                        fromInt nResults ++ " results found"
-                        in
-                        main_ [] <|
-                            let
-                                feedIds =
-                                    OrderedDict.keys entries |> List.reverse
-                            in
-                            div [ class "some-results" ] [ text message ]
-                                :: List.map
-                                    (\feed -> viewFeed feed state now entries)
-                                    (sortFeeds feeds feedIds [])
+                , viewMain model
                 , viewFooter
                 ]