hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix custom resource loading spinner appears above extensions' cluster menus (#2344)

Browse Source
This commit is contained in:
Sebastian Malton 2021-04-20 08:04:16 -04:00 committed by GitHub
parent bffdbcbd4c
commit ccf8928770
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/renderer/components/layout/sidebar.tsx
View File

@ -2,7 +2,6 @@ import "./sidebar.scss";
import type { TabLayoutRoute } from "./tab-layout"; import type { TabLayoutRoute } from "./tab-layout";
import React from "react"; import React from "react";
import { computed } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { cssNames } from "../../utils"; import { cssNames } from "../../utils";
@ -45,9 +44,13 @@ export class Sidebar extends React.Component<Props> {
crdStore.reloadAll(); crdStore.reloadAll();
} }
@computed get crdSubMenus(): React.ReactNode { renderCustomResources() {
if (!crdStore.isLoaded && crdStore.isLoading) { if (crdStore.isLoading) {
return <Spinner centerHorizontal/>; return (
<div className="flex justify-center">
<Spinner />
</div>
);
} }
return Object.entries(crdStore.groups).map(([group, crds]) => { return Object.entries(crdStore.groups).map(([group, crds]) => {
@ -268,7 +271,7 @@ export class Sidebar extends React.Component<Props> {
icon={<Icon material="extension"/>} icon={<Icon material="extension"/>}
> >
{this.renderTreeFromTabRoutes(CustomResources.tabRoutes)} {this.renderTreeFromTabRoutes(CustomResources.tabRoutes)}
{this.crdSubMenus} {this.renderCustomResources()}
</SidebarItem> </SidebarItem>
{this.renderRegisteredMenus()} {this.renderRegisteredMenus()}
</div> </div>

6
src/renderer/components/spinner/spinner.scss
View File

@ -34,12 +34,6 @@
margin-top: calc(var(--spinner-size) / -2); margin-top: calc(var(--spinner-size) / -2);
} }
&.centerHorizontal {
position: absolute;
left: 50%;
margin-left: calc(var(--spinner-size) / -2);
}
@keyframes rotate { @keyframes rotate {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);

5
src/renderer/components/spinner/spinner.tsx
View File

@ -6,7 +6,6 @@ import { cssNames } from "../../utils";
export interface SpinnerProps extends React.HTMLProps<any> { export interface SpinnerProps extends React.HTMLProps<any> {
singleColor?: boolean; singleColor?: boolean;
center?: boolean; center?: boolean;
centerHorizontal?: boolean;
} }
export class Spinner extends React.Component<SpinnerProps, {}> { export class Spinner extends React.Component<SpinnerProps, {}> {
@ -16,8 +15,8 @@ export class Spinner extends React.Component<SpinnerProps, {}> {
}; };
render() { render() {
const { center, singleColor, centerHorizontal, className, ...props } = this.props; const { center, singleColor, className, ...props } = this.props;
const classNames = cssNames("Spinner", className, { singleColor, center, centerHorizontal }); const classNames = cssNames("Spinner", className, { singleColor, center });
return <div {...props} className={classNames} />; return <div {...props} className={classNames} />;
} }