From 047c35c27800b766b01c18f2394710f3c0acd99f Mon Sep 17 00:00:00 2001
From: 3wc <3wc.git@doesthisthing.work>
Date: Sun, 25 Apr 2021 19:10:41 +0200
Subject: [PATCH] Nicer loading indicator

Closes #7
---
 public/index.html        | 2 +-
 src/Pages/App_String.elm | 7 ++++++-
 src/Pages/Top.elm        | 8 ++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index 90fa232..46285f1 100644
--- a/public/index.html
+++ b/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>
diff --git a/src/Pages/App_String.elm b/src/Pages/App_String.elm
index f0d7f1c..770c787 100644
--- a/src/Pages/App_String.elm
+++ b/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 []
diff --git a/src/Pages/Top.elm b/src/Pages/Top.elm
index a5864cb..301e262 100644
--- a/src/Pages/Top.elm
+++ b/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" ]