Add tooltip for cluster name in sidebar

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/layout/sidebar-cluster.module.css

@@ -61,4 +61,51 @@
 .avatar {
   font-weight: 500;
   margin-right: 1.25rem;
-}
+}
+
+.loadingAvatar {
+  position: relative;
+  pointer-events: none;
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background: transparentize(white, .85);
+    animation: waiting 1.5s infinite linear;
+  }
+}
+
+.loadingClusterName {
+  position: relative;
+  pointer-events: none;
+  width: 80%;
+  height: 16px;
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 100%;
+    background: transparentize(white, .85);
+    animation: waiting 1.5s infinite linear;
+  }
+}
+
+@keyframes waiting {
+  0% {
+    left: 0;
+    width: 0;
+  }
+  50% {
+    left: 25%;
+    width: 75%;
+  }
+  75% {
+    left: 100%;
+    width: 0;
+  }
+}

src/renderer/components/layout/sidebar-cluster.tsx

@@ -31,6 +31,7 @@ import { Icon } from "../icon";
 import { navigate } from "../../navigation";
 import { Menu, MenuItem } from "../menu";
 import { ConfirmDialog } from "../confirm-dialog";
+import { Tooltip } from "../tooltip";
 
 const contextMenu: CatalogEntityContextMenuContext = observable({
   menuItems: [],
@@ -60,11 +61,25 @@ function onMenuItemClick(menuItem: CatalogEntityContextMenu) {
   }
 }
 
+function renderLoadingSidebarCluster() {
+  return (
+    <div className={styles.SidebarCluster}>
+      <Avatar
+        title="??"
+        background="var(--halfGray)"
+        size={40}
+        className={styles.loadingAvatar}
+      />
+      <div className={styles.loadingClusterName} />
+    </div>
+  );
+}
+
 export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity }) {
   const [opened, setOpened] = useState(false);
 
   if (!clusterEntity) {
-    return null;
+    return renderLoadingSidebarCluster();
   }
 
   const onMenuOpen = () => {
@@ -95,6 +110,7 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
 
   const { metadata, spec } = clusterEntity;
   const id = `cluster-${metadata.uid}`;
+  const tooltipId = `tooltip-${id}`;
 
   return (
     <div
@@ -112,9 +128,12 @@ export function SidebarCluster({ clusterEntity }: { clusterEntity: CatalogEntity
         src={spec.icon?.src}
         className={styles.avatar}
       />
-      <div className={styles.clusterName}>
+      <div className={styles.clusterName} id={tooltipId}>
         {metadata.name}
       </div>
+      <Tooltip targetId={tooltipId}>
+        {metadata.name}
+      </Tooltip>
       <Icon material="arrow_drop_down" className={styles.dropdown}/>
       <Menu
         usePortal