diff --git a/src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx b/src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx index 195368408d..c256c03e76 100644 --- a/src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx +++ b/src/renderer/components/layout/__tests__/sidebar-cluster.test.tsx @@ -57,18 +57,25 @@ describe("", () => { }); it("renders cluster avatar and name", () => { - const { getByText } = render(); + const { getByText, getAllByText } = render(); expect(getByText("tc")).toBeInTheDocument(); - expect(getByText("test-cluster")).toBeInTheDocument(); + + const v = getAllByText("test-cluster"); + + expect(v.length).toBeGreaterThan(0); + + for (const e of v) { + expect(e).toBeInTheDocument(); + } }); - it("renders cluster menu", async () => { + it("renders cluster menu", () => { const { getByTestId, getByText } = render(); const link = getByTestId("sidebar-cluster-dropdown"); fireEvent.click(link); - expect(await getByText("Add to Hotbar")).toBeInTheDocument(); + expect(getByText("Add to Hotbar")).toBeInTheDocument(); }); }); diff --git a/src/renderer/components/layout/sidebar-cluster.module.css b/src/renderer/components/layout/sidebar-cluster.module.css index 635443500d..2b57854776 100644 --- a/src/renderer/components/layout/sidebar-cluster.module.css +++ b/src/renderer/components/layout/sidebar-cluster.module.css @@ -61,4 +61,51 @@ .avatar { font-weight: 500; margin-right: 1.25rem; -} \ No newline at end of file +} + +.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; + } +} diff --git a/src/renderer/components/layout/sidebar-cluster.tsx b/src/renderer/components/layout/sidebar-cluster.tsx index baa77f168e..a4479f1a24 100644 --- a/src/renderer/components/layout/sidebar-cluster.tsx +++ b/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 ( +
+ +
+
+ ); +} + 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 (
-
+
{metadata.name}
+ + {metadata.name} +