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}
+