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 catalog list flashing (#3157)

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2021-06-23 13:35:37 +03:00 committed by GitHub
parent cec5139b4f
commit d2a7e346f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/renderer/components/+catalog/catalog.tsx
View File

@ -24,7 +24,7 @@ import styles from "./catalog.module.css";
import React from "react"; import React from "react";
import { disposeOnUnmount, observer } from "mobx-react"; import { disposeOnUnmount, observer } from "mobx-react";
import { ItemListLayout } from "../item-object-list"; import { ItemListLayout } from "../item-object-list";
import { action, makeObservable, observable, reaction, when } from "mobx"; import { action, makeObservable, observable, reaction, runInAction, when } from "mobx";
import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store"; import { CatalogEntityItem, CatalogEntityStore } from "./catalog-entity.store";
import { navigate } from "../../navigation"; import { navigate } from "../../navigation";
import { MenuItem, MenuActions } from "../menu"; import { MenuItem, MenuActions } from "../menu";
@ -62,16 +62,17 @@ export class Catalog extends React.Component<Props> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
makeObservable(this); makeObservable(this);
this.catalogEntityStore = new CatalogEntityStore();
} }
get routeActiveTab(): string | undefined { get routeActiveTab(): string {
const { group, kind } = this.props.match.params ?? {}; const { group, kind } = this.props.match.params ?? {};
if (group && kind) { if (group && kind) {
return `${group}/${kind}`; return `${group}/${kind}`;
} }
return undefined; return "";
} }
async componentDidMount() { async componentDidMount() {
@ -79,17 +80,19 @@ export class Catalog extends React.Component<Props> {
menuItems: observable.array([]), menuItems: observable.array([]),
navigate: (url: string) => navigate(url), navigate: (url: string) => navigate(url),
}; };
this.catalogEntityStore = new CatalogEntityStore();
disposeOnUnmount(this, [ disposeOnUnmount(this, [
this.catalogEntityStore.watch(), this.catalogEntityStore.watch(),
reaction(() => this.routeActiveTab, async (routeTab) => { reaction(() => this.routeActiveTab, async (routeTab) => {
await when(() => catalogCategoryRegistry.items.length > 0); try {
const item = catalogCategoryRegistry.items.find(i => i.getId() === routeTab); await when(() => (routeTab === "" || !!catalogCategoryRegistry.items.find(i => i.getId() === routeTab)), { timeout: 5_000 }); // we need to wait because extensions might take a while to load
const item = catalogCategoryRegistry.items.find(i => i.getId() === routeTab);
if (item || routeTab === undefined) { runInAction(() => {
this.activeTab = routeTab; this.activeTab = routeTab;
this.catalogEntityStore.activeCategory = item; this.catalogEntityStore.activeCategory = item;
} else { });
} catch(error) {
console.error(error);
Notifications.error(<p>Unknown category: {routeTab}</p>); Notifications.error(<p>Unknown category: {routeTab}</p>);
} }
}, {fireImmediately: true}), }, {fireImmediately: true}),
@ -264,6 +267,14 @@ export class Catalog extends React.Component<Props> {
); );
} }
renderCategoryList() {
if (this.activeTab === undefined) {
return null;
}
return this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList();
}
render() { render() {
if (!this.catalogEntityStore) { if (!this.catalogEntityStore) {
return null; return null;
@ -272,7 +283,7 @@ export class Catalog extends React.Component<Props> {
return ( return (
<MainLayout sidebar={this.renderNavigation()}> <MainLayout sidebar={this.renderNavigation()}>
<div className="p-6 h-full"> <div className="p-6 h-full">
{ this.catalogEntityStore.activeCategory ? this.renderSingleCategoryList() : this.renderAllCategoriesList() } { this.renderCategoryList() }
</div> </div>
{ {
this.catalogEntityStore.selectedItem this.catalogEntityStore.selectedItem