Merge pull request #26 from unisonweb/add-card-loading-state

Add WorkspaceCard loading state
unisonweb · Jan 2, 2025 · 7e2d8bb · 7e2d8bb
2 parents 993c9ad + 309e0a8
commit 7e2d8bb
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git a/src/Ucm/Workspace/WorkspaceItemRef.elm b/src/Ucm/Workspace/WorkspaceItemRef.elm
@@ -1,6 +1,9 @@
 module Ucm.Workspace.WorkspaceItemRef exposing (..)
 
 import Code.Definition.Reference as Reference exposing (Reference)
+import Code.FullyQualifiedName as FQN
+import Code.Hash as Hash
+import Maybe.Extra as MaybeE
 
 
 type SearchResultsRef
@@ -26,7 +29,17 @@ toHumanString : WorkspaceItemRef -> String
 toHumanString ref =
     case ref of
         DefinitionItemRef r ->
-            Reference.toHumanString r
+            let
+                fqn =
+                    Reference.fqn r
+
+                hash =
+                    Reference.hash r
+            in
+            fqn
+                |> Maybe.map FQN.toString
+                |> MaybeE.or (Maybe.map Hash.toShortString hash)
+                |> Maybe.withDefault (Reference.toHumanString r)
 
         SearchResultsItemRef (SearchResultsRef r) ->
             r
diff --git a/src/Ucm/Workspace/WorkspacePane.elm b/src/Ucm/Workspace/WorkspacePane.elm
@@ -29,6 +29,7 @@ import UI.Icon as Icon
 import UI.KeyboardShortcut as KeyboardShortcut exposing (KeyboardShortcut(..))
 import UI.KeyboardShortcut.Key exposing (Key(..))
 import UI.KeyboardShortcut.KeyboardEvent as KeyboardEvent
+import UI.Placeholder as Placeholder
 import UI.TabList as TabList
 import Ucm.AppContext exposing (AppContext)
 import Ucm.ContextualTag as ContextualTag
@@ -500,8 +501,18 @@ viewItem definitionSummaryTooltip item isFocused =
 
         card =
             case item of
-                WorkspaceItem.Loading _ ->
-                    Nothing
+                WorkspaceItem.Loading ref ->
+                    cardBase
+                        |> WorkspaceCard.withTitlebarLeft [ text (WorkspaceItemRef.toHumanString ref) ]
+                        |> WorkspaceCard.withContent
+                            [ div [ class "workspace-card_loading" ]
+                                [ Placeholder.text |> Placeholder.withLength Placeholder.Medium |> Placeholder.view
+                                , Placeholder.text |> Placeholder.withLength Placeholder.Huge |> Placeholder.view
+                                , Placeholder.text |> Placeholder.withLength Placeholder.Large |> Placeholder.view
+                                , Placeholder.text |> Placeholder.withLength Placeholder.Medium |> Placeholder.view
+                                , Placeholder.text |> Placeholder.withLength Placeholder.Small |> Placeholder.view
+                                ]
+                            ]
 
                 WorkspaceItem.Success wsRef (WorkspaceItem.DefinitionWorkspaceItem state defItem) ->
                     let
@@ -547,7 +558,11 @@ viewItem definitionSummaryTooltip item isFocused =
                             ]
                         |> withTabList
                         |> WorkspaceCard.withContent [ itemContent ]
-                        |> Just
+
+                WorkspaceItem.Success _ _ ->
+                    {- TODO -}
+                    cardBase
+                        |> WorkspaceCard.withContent []
 
                 WorkspaceItem.Failure wsRef e ->
                     cardBase
@@ -558,17 +573,10 @@ viewItem definitionSummaryTooltip item isFocused =
                                 , text (Util.httpErrorToString e)
                                 ]
                             ]
-                        |> Just
-
-                _ ->
-                    cardBase
-                        |> WorkspaceCard.withContent []
-                        |> Just
     in
     card
-        |> Maybe.map (WorkspaceCard.withFocus isFocused)
-        |> Maybe.map WorkspaceCard.view
-        |> Maybe.withDefault UI.nothing
+        |> WorkspaceCard.withFocus isFocused
+        |> WorkspaceCard.view
 
 
 view : Bool -> Model -> Html Msg

diff --git a/src/css/ucm/workspace/workspace-card.css b/src/css/ucm/workspace/workspace-card.css
@@ -63,6 +63,12 @@
     padding: 0.75rem;
     max-width: min(calc(var(--c-workspace-card_width) - 1.5rem), 100%);
   }
+
+  & .workspace-card_loading {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 }
 
 .workspace-card.card {