spinner

elm.json

@@ -7,7 +7,9 @@
     "dependencies": {
         "direct": {
             "Chadtech/unique-list": "2.1.4",
+            "avh4/elm-color": "1.0.0",
             "ccapndave/elm-flat-map": "1.2.0",
+            "damienklinnert/elm-spinner": "3.0.2",
             "elm/browser": "1.0.2",
             "elm/core": "1.0.5",
             "elm/html": "1.0.0",

src/Blueprints/View.elm

@@ -7,6 +7,7 @@ import Html.Attributes exposing (attribute)
 import Model exposing (Model, PeerData)
 import Palette exposing (classes)
 import Service.Model exposing (Service)
+import SpinnerView exposing (spinner)
 import Utils.Utils exposing (servicesText)
 
 
@@ -33,8 +34,15 @@ view model =
 
         servicesView =
             List.map viewService info
+
+        finalView =
+            if List.length servicesView == 0 then
+                spinner model
+
+            else
+                servicesView
     in
-    div [ classes "cf" ] servicesView
+    div [ classes "cf" ] finalView
 
 
 viewService : BlueprintInfo -> Html msg

src/Instances/View.elm

@@ -9,6 +9,7 @@ import Model exposing (Model)
 import Nodes.Model exposing (Identify)
 import Palette exposing (classes, shortHashRaw)
 import Service.Model exposing (Service)
+import SpinnerView exposing (spinner)
 
 
 toInstance : String -> Identify -> Dict String Blueprint -> Service -> Instance
@@ -45,8 +46,15 @@ view model filter =
                             |> List.map (toInstance peer data.identify model.blueprints)
                     )
                 |> List.concat
+
+        finalView =
+            if List.length instances == 0 then
+                Html.div [] (spinner model)
+
+            else
+                viewTable instances
     in
-    ( List.length instances, viewTable instances )
+    ( List.length instances, finalView )
 
 
 viewTable : List Instance -> Html msg

src/Main.elm

@@ -23,6 +23,7 @@ import Dict
 import Model exposing (Model)
 import Msg exposing (Msg(..))
 import Route
+import Spinner
 import Subscriptions exposing (subscriptions)
 import Update exposing (update)
 import Url
@@ -59,6 +60,7 @@ init flags url key =
             , toggledInterface = Nothing
             , knownPeers = flags.knownPeers
             , isInitialized = False
+            , spinner = Spinner.init
             }
     in
     ( emptyModel, Route.routeCommand emptyModel r )

src/Model.elm

@@ -22,6 +22,7 @@ import Dict exposing (Dict)
 import Modules.Model exposing (Module)
 import Nodes.Model exposing (Identify, emptyIdentify)
 import Service.Model exposing (Service)
+import Spinner
 import Url
 
 
@@ -58,4 +59,5 @@ type alias Model =
     , toggledInterface : Maybe String
     , knownPeers : List String
     , isInitialized : Bool
+    , spinner : Spinner.Model
     }

src/Modules/View.elm

@@ -9,20 +9,22 @@ import Model exposing (Model, PeerData)
 import Modules.Model exposing (Module, ModuleShortInfo)
 import Palette exposing (classes)
 import Service.Model exposing (Service)
+import SpinnerView exposing (spinner)
 import Utils.Utils exposing (instancesText)
 
 
 getModuleShortInfo : Model -> List ModuleShortInfo
 getModuleShortInfo model =
     let
-        all = getAllModules model.blueprints model.modules model.modulesByHash model.discoveredPeers
-        res = all
-                    |> Dict.toList
-                    |> List.map (\( _, ( moduleInfo, services ) ) -> { moduleInfo = moduleInfo, instanceNumber = List.length services })
+        all =
+            getAllModules model.blueprints model.modules model.modulesByHash model.discoveredPeers
 
+        res =
+            all
+                |> Dict.toList
+                |> List.map (\( _, ( moduleInfo, services ) ) -> { moduleInfo = moduleInfo, instanceNumber = List.length services })
     in
-        res
-
+    res
 
 
 getAllModules : Dict String Blueprint -> Dict String Module -> Dict String Module -> Dict String PeerData -> Dict String ( Module, List Service )
@@ -77,6 +79,7 @@ filterByModuleName bps moduleName =
                     |> List.map (\d -> String.split ":" d)
                     |> List.map (\p -> Maybe.withDefault [] (List.tail p))
                     |> List.map (\p -> Maybe.withDefault "" (List.head p))
+
         check =
             Maybe.map (\bp -> names bp |> List.member moduleName)
 
@@ -106,15 +109,22 @@ filterByModuleHash bps moduleHash =
 
 
 view : Model -> Html msg
-view modules =
+view model =
     let
         info =
-            getModuleShortInfo modules
+            getModuleShortInfo model
 
         modulesView =
             List.map viewService info
+
+        finalView =
+            if List.length modulesView == 0 then
+                spinner model
+
+            else
+                modulesView
     in
-    div [ classes "cf" ] modulesView
+    div [ classes "cf" ] finalView
 
 
 viewService : ModuleShortInfo -> Html msg

src/Msg.elm

@@ -2,6 +2,7 @@ module Msg exposing (..)
 
 import Browser exposing (UrlRequest)
 import Port
+import Spinner
 import Url
 
 
@@ -12,4 +13,5 @@ type Msg
     | AquamarineEvent Port.ReceiveEvent
     | RelayChanged String
     | ToggleInterface String
+    | SpinnerMsg Spinner.Msg
     | Reload

src/SpinnerView.elm

@@ -0,0 +1,33 @@
+module SpinnerView exposing (..)
+
+import Color
+import Html exposing (Html)
+import Model exposing (Model)
+import Palette exposing (classes)
+import Spinner
+
+
+spinner : Model -> List (Html msg)
+spinner model =
+    [ Html.div [ classes "p3 relative" ]
+        [ Spinner.view
+            { lines = 11
+            , length = 20
+            , width = 9
+            , radius = 21
+            , scale = 0.5
+            , corners = 1
+            , opacity = 0.25
+            , rotate = 0
+            , direction = Spinner.Clockwise
+            , speed = 1
+            , trail = 60
+            , translateX = 50
+            , translateY = 50
+            , shadow = True
+            , hwaccel = False
+            , color = always <| Color.rgba 255 255 255 1
+            }
+            model.spinner
+        ]
+    ]

src/Subscriptions.elm

@@ -19,10 +19,12 @@ limitations under the License.
 import Model exposing (Model)
 import Msg exposing (Msg(..))
 import Port exposing (eventReceiver)
+import Spinner
 
 
 subscriptions : Model -> Sub Msg
 subscriptions model =
     Sub.batch
         [ eventReceiver AquamarineEvent
+        , Sub.map SpinnerMsg Spinner.subscription
         ]

src/Update.elm

@@ -29,6 +29,7 @@ import Nodes.Model exposing (Identify)
 import Port exposing (sendAir)
 import Route exposing (getAllCmd)
 import Service.Model exposing (Service)
+import Spinner
 import Url
 
 
@@ -107,6 +108,15 @@ update msg model =
         Reload ->
             ( model, sendAir (GetAll.air model.peerId model.relayId model.knownPeers) )
 
+        SpinnerMsg spinnerMsg ->
+            let
+                spinnerModel =
+                    Spinner.update spinnerMsg model.spinner
+            in
+            ( { model | spinner = spinnerModel }
+            , Cmd.none
+            )
+
 
 updateModel : Model -> String -> Identify -> List Service -> List Module -> List Blueprint -> Model
 updateModel model peer identify services modules blueprints =