style: improve tab loading style

Instead of replacing the title with "Loading...", it replaces the
favicon with a three dot loading animation. The title is always shown,
unless it is empty, in which case the URL is shown.

extension/sidebar.css

@@ -6,6 +6,16 @@ body,
   overflow: hidden visible;
 }
 
+#bar {
+  width: 100%;
+  height: 100%;
+}
+
+#bar-tabs {
+  width: 100%;
+  height: 100%;
+}
+
 #tabs {
   padding-top: 1px;
   width: 100%;
@@ -69,6 +79,44 @@ body,
   filter: brightness(70%);
 }
 
+/*Huge thanks to @tobiasahlin at http://tobiasahlin.com/spinkit/ */
+.three-dot-bounce {
+  margin: 0px 6px 0px 5px;
+  width: 15px;
+  text-align: center;
+}
+
+.three-dot-bounce > div {
+  margin-top: 0;
+  /* this margin-bottom is used to center the three dots */
+  margin-bottom: 4px;
+  padding-bottom: 0;
+  padding-top: 0;
+  width: 3px;
+  height: 3px;
+  background-color: #333;
+
+  border-radius: 100%;
+  display: inline-block;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.three-dot-bounce .three-dot-bounce-1 {
+  animation-delay: -0.32s;
+}
+
+.three-dot-bounce .three-dot-bounce-2 {
+  animation-delay: -0.16s;
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% { 
+    transform: scale(0);
+  } 40% { 
+    transform: scale(1.0);
+  }
+}
+
 .close-button-parent {
   width: 17px;
   height: 17px;

src/Sidebar/Components/Bar.purs

@@ -13,6 +13,7 @@ import Effect.Aff.Class (class MonadAff)
 import Effect.Class (class MonadEffect)
 import Halogen as H
 import Halogen.HTML as HH
+import Halogen.HTML.Properties as HP
 import Prelude (class Eq, class Ord, (<<<))
 import PureTabs.Model (SidebarEvent)
 import PureTabs.Sidebar.Tabs (Output(..))
@@ -67,8 +68,8 @@ component =
     }
   where
   render :: State -> H.ComponentHTML Action Slots m
-  render state = HH.div_ [
-    HH.div_ $ (uncurry renderTab) <$> (M.toUnfoldable state.groups)
+  render state = HH.div [ HP.id_ "bar" ] [
+    HH.div [ HP.id_ "bar-tabs"] $ (uncurry renderTab) <$> (M.toUnfoldable state.groups)
   ]
 
   renderTab :: GroupId -> Group -> H.ComponentHTML Action Slots m

src/Sidebar/Components/Tabs.purs

@@ -8,13 +8,14 @@ import Control.Alternative (empty, pure, (*>))
 import Control.Bind (bind, discard, (>=>), (>>=))
 import Control.Category (identity, (<<<), (>>>))
 import Data.Array (mapWithIndex, catMaybes, deleteAt, filter, findIndex, head, insertAt, modifyAt, (!!), length) as A
-import Data.Eq ((==))
+import Data.Eq ((/=), (==))
 import Data.Function (flip, ($))
 import Data.Lens (over)
 import Data.Maybe (Maybe(..), fromMaybe, maybe)
 import Data.MediaType.Common (textPlain)
 import Data.Monoid ((<>))
 import Data.Show (show)
+import Data.String.CodeUnits (length)
 import Data.Symbol (SProxy(..))
 import Data.Time.Duration (Milliseconds(..))
 import Data.Unit (Unit, unit)
@@ -30,7 +31,7 @@ import Halogen.HTML as HH
 import Halogen.HTML.CSS as CSS
 import Halogen.HTML.Events as HE
 import Halogen.HTML.Properties as HP
-import Prelude (sub, negate)
+import Prelude (negate, sub)
 import PureTabs.Model (SidebarEvent(..), _tabs)
 import Web.Event.Event (Event)
 import Web.Event.Event as Event
@@ -145,7 +146,15 @@ render state =
           ]
           (A.mapWithIndex (\idx tab -> renderTab idx (idx == currentOverIndex) tab) tabs)
       ]
+
   where
+
+  threeDotBounces = HH.div [ HP.class_ (H.ClassName "three-dot-bounce") ] [
+    HH.div [HP.class_ (H.ClassName "three-dot-bounce-1")] [],  
+    HH.div [HP.class_ (H.ClassName "three-dot-bounce-2")] [],
+    HH.div [HP.class_ (H.ClassName "three-dot-bounce-3")] []
+    ]
+
   renderTab :: Int -> Boolean -> Tab -> H.ComponentHTML Action () m
   renderTab index isBeingDragged (Tab t) =
     HH.div
@@ -178,16 +187,12 @@ render state =
                   _ -> Nothing
               ]
       , HP.title t.title
-      ]
-
-      [ HH.div [ HP.class_ $ H.ClassName "tab-favicon", faviconStyle t.favIconUrl ] []
+      ] [
+      case t.status of 
+           Just "loading" -> threeDotBounces
+           _ -> HH.div [ HP.class_ $ H.ClassName "tab-favicon", faviconStyle t.favIconUrl ] [] 
 
-      , HH.div [ HP.class_ $ H.ClassName "tab-title" ]
-          [ HH.text
-              $ case t.status of
-                  Just "loading" -> "Loading ..."
-                  _ -> t.title
-          ]
+      , HH.div [ HP.class_ $ H.ClassName "tab-title" ] [ HH.text (if length t.title /= 0 then t.title else maybe "" identity t.url) ]
 
       , HH.div
           [ HP.class_ $ H.ClassName "close-button-parent"