better loading screen

Author: functora

ghcjs/currency-converter/src/App/Widgets/Fav.hs

@@ -135,6 +135,7 @@ makeFavName :: Model -> MisoString
 makeFavName st =
   toMisoString
     . T.toUpper
+    . T.strip
     $ fromMisoString preFavName
   where
     preFavName =

ghcjs/currency-converter/src/App/Widgets/FieldPairs.hs

@@ -20,11 +20,26 @@ fieldPairViewer st pair =
       else
         [ cell
             $ strong_
-              [Typography.typography]
+              [ Typography.typography,
+                class_ "fill",
+                class_ "mdc-text-field",
+                class_ "mdc-text-field--filled",
+                style_
+                  [ ("align-items", "center"),
+                    ("align-content", "center"),
+                    ("word-break", "normal"),
+                    ("overflow-wrap", "anywhere"),
+                    ("min-height", "56px"),
+                    ("height", "auto"),
+                    ("padding-top", "8px"),
+                    ("padding-bottom", "8px"),
+                    ("line-height", "150%")
+                  ]
+              ]
               [text $ pair ^. #fieldPairKey . #fieldOutput]
         ]
   )
-    <> ( if k == mempty && v == mempty
+    <> ( if v == mempty
           then mempty
           else
             [ cell
@@ -36,7 +51,7 @@ fieldPairViewer st pair =
     k = pair ^. #fieldPairKey . #fieldOutput
     v = inspectDynamicField $ pair ^. #fieldPairValue . #fieldOutput
     cell =
-      if k == mempty
+      if k == mempty || v == mempty
         then Cell.bigCell
         else Cell.mediumCell
 

ghcjs/currency-converter/src/App/Widgets/Main.hs

@@ -27,17 +27,9 @@ mainWidget st =
     [ LayoutGrid.alignMiddle
     ]
     $ [ LayoutGrid.inner
-          ( [ class_ "container",
-              TopAppBar.shortFixedAdjust
-            ]
-              --
-              -- NOTE : Hiding widget on the first render to avoid flickering.
-              --
-              <> ( if st ^. #modelLoading
-                    then [style_ [("display", "none")]]
-                    else mempty
-                 )
-          )
+          [ class_ "container",
+            TopAppBar.shortFixedAdjust
+          ]
           ( Menu.menu st
               <> screenWidget st
               <> [ -- LayoutGrid.cell [LayoutGrid.span12]
@@ -53,7 +45,15 @@ mainWidget st =
           )
       ]
     <> ( if st ^. #modelLoading
-          then [div_ [class_ "lds-dual-ring"] mempty]
+          then
+            [ div_
+                [ class_
+                    "mdc-dialog mdc-dialog--fullscreen fullscreen-dialog mdc-dialog--open mdc-dialog-scroll-divider-footer mdc-dialog--scrollable"
+                ]
+                [ div_ [class_ "mdc-dialog__scrim"] mempty,
+                  div_ [class_ "lds-dual-ring"] mempty
+                ]
+            ]
           else mempty
        )
 

ghcjs/currency-converter/src/Main.hs

@@ -199,8 +199,7 @@ updateModel (ChanUpdate prevSt) _ = do
             )
             $ foldlM (\acc updater -> evalModel $ updater acc) prevSt actions
         uri <- URI.mkURI $ shareLink nextSt
-        let fm = nextSt ^. #modelFavMap
-        when (fm /= mempty) $ Storage.insertStorage ("favorite-" <> vsn) fm
+        Storage.insertStorage ("favorite-" <> vsn) (nextSt ^. #modelFavMap)
         Storage.insertStorage ("current-" <> vsn) uri
         if nextSt ^. #modelLoading
           then do

ghcjs/currency-converter/static/app.css

@@ -68,8 +68,8 @@ textarea {
   height: 64px;
   margin: 8px;
   border-radius: 50%;
-  border: 6px solid #6200ee;
-  border-color: #6200ee transparent #6200ee transparent;
+  border: 6px solid #ffffff;
+  border-color: #ffffff transparent #ffffff transparent;
   animation: lds-dual-ring 1.2s linear infinite;
 }
 @keyframes lds-dual-ring {