implement no actions card

Author: hrajchert

marlowe-dashboard-client/package-lock.json

@@ -34,7 +34,7 @@
     "purescript-psa": "^0.8.2",
     "purs-loader": "^3.7.2",
     "raw-loader": "^4.0.2",
-    "tailwindcss": "^2.2.4",
+    "tailwindcss": "^2.2.7",
     "webpack": "^5.36.2",
     "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.11.2"

marlowe-dashboard-client/package.json

@@ -27,7 +27,7 @@ import Effect.Aff.Class (class MonadAff)
 import Halogen (ComponentHTML)
 import Halogen.Css (applyWhen, classNames)
 import Halogen.Extra (lifeCycleSlot, LifecycleEvent(..))
-import Halogen.HTML (HTML, a, button, div, div_, h2, h3, h4_, input, p, span, span_, sup_, text)
+import Halogen.HTML (HTML, a, button, div, div_, h2, h3, h4, h4_, input, p, span, span_, sup_, text)
 import Halogen.HTML.Events (onClick)
 import Halogen.HTML.Events.Extra (onClick_, onValueInput_)
 import Halogen.HTML.Properties (InputType(..), enabled, href, id_, placeholder, ref, target, type_, value)
@@ -720,9 +720,23 @@ renderTasks state =
         $ namedActions
         <#> uncurry (renderPartyTasks state)
     else
-      div
-        [ classNames [ "p-4" ] ]
-        [ text "There are no tasks to perform at this step. The contract will progress automatically when the timeout has passed." ]
+      noPossibleActions
+
+noPossibleActions :: forall p a. HTML p a
+noPossibleActions =
+  let
+    purpleDot extraCss = div [ classNames $ [ "rounded-full", "bg-lightpurple", "w-3", "h-3", "animate-grow" ] <> extraCss ] []
+  in
+    div
+      [ classNames [ "p-4", "text-xs", "flex", "flex-col", "h-full" ] ]
+      [ h4 [ classNames [ "font-semibold" ] ] [ text "Please wait…" ]
+      , p [ classNames [ "mt-2" ] ] [ text "There are no tasks to complete at this step. The contract will progress automatically when the timeout passes." ]
+      , div [ classNames [ "flex-grow", "flex", "justify-center", "items-center" ] ]
+          [ purpleDot [ "mr-2" ]
+          , purpleDot [ "animate-delay-150" ]
+          , purpleDot [ "ml-2", "animate-delay-300" ]
+          ]
+      ]
 
 participantWithNickname :: State -> Party -> String
 participantWithNickname state party =

marlowe-dashboard-client/src/Contract/View.purs

@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;1,400&display=swap");
 
-@import "tabs.css";
+@import "./tabs.css";
+@import "./utilities.css";
 @import "../../web-common/static/icons.css";
 @import "../../web-common/static/popover.css";
 

marlowe-dashboard-client/static/css/main.css

@@ -0,0 +1,24 @@
+/* Tailwind has a utility for transition delay, but not for animation delay, for the
+  moment I'm manually adding some utilities.
+  The !important is used because the animation shorthand property (the one that tailwind uses)
+  resets the delay to zero (probably thats the reason they didn't add this kind of utility yet)
+*/
+.animate-delay-75 {
+  animation-delay: 75ms !important;
+}
+
+.animate-delay-100 {
+  animation-delay: 100ms !important;
+}
+
+.animate-delay-150 {
+  animation-delay: 150ms !important;
+}
+
+.animate-delay-200 {
+  animation-delay: 200ms !important;
+}
+
+.animate-delay-300 {
+  animation-delay: 300ms !important ;
+}

marlowe-dashboard-client/static/css/utilities.css

@@ -70,6 +70,7 @@ module.exports = {
       animation: {
         "from-below": "from-below 250ms ease-out 1",
         "to-bottom": "to-bottom 250ms ease-out 1",
+        grow: "grow 1s ease-in-out infinite",
       },
       transitionProperty: {
         width: "width",
@@ -89,6 +90,10 @@ module.exports = {
           "0%": { transform: "translateY(0px)", opacity: 1 },
           "100%": { transform: "translateY(20px)", opacity: 0 },
         },
+        grow: {
+          "0%, 100%": { transform: "scale(1)" },
+          "50%": { transform: "scale(1.15)" },
+        },
       },
       gridTemplateRows: {
         "auto-1fr": "auto minmax(0, 1fr)",