Nicer loading indicator

Closes #7

public/index.html

@@ -7,7 +7,7 @@
   <link rel="stylesheet" href="/style.css">
   <title>abra apps</title>
   <link rel="stylesheet"
-     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
+     href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   <!--<link rel="stylesheet"
     href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css">-->
   <script src="https://kit.fontawesome.com/60c2d44730.js" crossorigin="anonymous"></script>

src/Pages/App_String.elm

@@ -154,7 +154,12 @@ body model =
                     ]
 
             Loading ->
-                text "Loading..."
+              div [ class "d-flex align-items-center", style "height" "89vh" ]
+                  [ div [ class "spinner-border m-auto text-light" ]
+                      [
+                          span [ class "sr-only" ] [ text "Loading..." ]
+                      ]
+                  ]
 
             Success app ->
                 div []

src/Pages/Top.elm

@@ -190,8 +190,12 @@ viewApps model =
                 ]
 
         Loading ->
-            text "Loading..."
-
+            div [ class "d-flex align-items-center", style "height" "89vh" ]
+                [ div [ class "spinner-border m-auto text-light" ]
+                    [
+                        span [ class "sr-only" ] [ text "Loading..." ]
+                    ]
+                ]
         Success apps ->
             div []
                 [ div [ class "row" ]