switch to asyncComputed

Signed-off-by: Roman <ixrock@gmail.com>

package-lock.json

@@ -32254,7 +32254,7 @@
       "dependencies": {
         "@astronautlabs/jsonpath": "^1.1.0",
         "@hapi/call": "^9.0.1",
-        "@hapi/subtext": "^7.0.4",
+        "@hapi/subtext": "^7.1.0",
         "@k8slens/node-fetch": "^6.4.0-beta.13",
         "@kubernetes/client-node": "^0.18.1",
         "@material-ui/styles": "^4.11.5",
@@ -34095,6 +34095,7 @@
       }
     },
     "packages/infrastructure/webpack": {
+      "name": "@k8slens/webpack",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {

packages/core/src/renderer/api/catalog/entity/metrics-details-component-enabled.injectable.ts

@@ -18,7 +18,7 @@ const metricsDetailsComponentEnabledInjectable = getInjectable({
     const currentKubeObjectInDetails = di.inject(currentKubeObjectInDetailsInjectable);
 
     return computed(() => {
-      const kubeObject = currentKubeObjectInDetails.get() as KubeObjectDetailsItem;
+      const kubeObject = currentKubeObjectInDetails.value.get() as KubeObjectDetailsItem;
 
       if (kubeObject) {
         return kubeObject.kind == kind && metricsEnabled.get();

packages/core/src/renderer/components/kube-object-details/current-kube-object-in-details.injectable.ts

@@ -2,41 +2,39 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import { action, computed, type IComputedValue, observable, runInAction } from "mobx";
 import { getInjectable } from "@ogre-tools/injectable";
+import { asyncComputed } from "@ogre-tools/injectable-react";
 import kubeDetailsUrlParamInjectable from "../kube-detail-params/kube-details-url.injectable";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
 
 export type KubeObjectDetailsItem = KubeObject;
 export type KubeObjectDetailsValue = KubeObjectDetailsItem | Error | undefined;
-export type KubeObjectDetailsComputedValue = IComputedValue<KubeObjectDetailsValue>;
 
 const currentKubeObjectInDetailsInjectable = getInjectable({
-  id: "current-kube-object-in-details",
+  id: "current-kube-object-in-details-async-computed",
 
-  instantiate(di): KubeObjectDetailsComputedValue {
+  instantiate: (di) => {
-    const kubeObjectUrlParam = di.inject(kubeDetailsUrlParamInjectable);
+    const urlParam = di.inject(kubeDetailsUrlParamInjectable);
     const apiManager = di.inject(apiManagerInjectable);
-    const kubeObject = observable.box<KubeObjectDetailsValue>();
 
-    return computed<KubeObjectDetailsValue>(() => {
+    return asyncComputed<KubeObjectDetailsValue>({
-      const kubeObjUrlPath = kubeObjectUrlParam.get();
+      betweenUpdates: "show-latest-value",
 
-      if (!kubeObjUrlPath) return; // details panel is hidden
+      async getValueFromObservedPromise() {
+        const path = urlParam.get();
+        const store = apiManager.getStore(path);
 
-      const store = apiManager.getStore(kubeObjUrlPath);
+        if (!store) {
-      const object = store?.getByPath(kubeObjUrlPath);
+          return undefined;
+        }
 
-      if (!object) {
+        try {
-        store?.loadFromPath(kubeObjUrlPath)
+          return store.getByPath(path) ?? await store.loadFromPath(path);
-          .then(action((obj) => kubeObject.set(obj)))
+        } catch (error) {
-          .catch(action((error) => kubeObject.set(Error(error))));
+          return Error(String(error));
-      } else {
+        }
-        runInAction(() => kubeObject.set(object));
+      },
-      }
-
-      return kubeObject.get() ?? object;
     });
   },
 });

packages/core/src/renderer/components/kube-object-details/custom-resource-detail-item.injectable.tsx

@@ -19,7 +19,7 @@ const customResourceDetailItemInjectable = getInjectable({
     const customResourceDefinitionStore = di.inject(customResourceDefinitionStoreInjectable);
     const currentKubeObjectInDetails = di.inject(currentKubeObjectInDetailsInjectable);
     const currentCustomResourceDefinition = computed(() => {
-      const object = currentKubeObjectInDetails.get();
+      const object = currentKubeObjectInDetails.value.get();
 
       if (!object) {
         return undefined;

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cluster-role-binding-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const clusterRoleBindingDetailItemInjectable = getInjectable({
 
     return {
       Component: ClusterRoleBindingDetails,
-      enabled: computed(() => isClusterRoleBinding(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isClusterRoleBinding(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cluster-role-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const clusterRoleDetailItemInjectable = getInjectable({
 
     return {
       Component: ClusterRoleDetails,
-      enabled: computed(() => isClusterRole(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isClusterRole(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/config-map-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const configMapDetailItemInjectable = getInjectable({
 
     return {
       Component: ConfigMapDetails,
-      enabled: computed(() => isConfigMap(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isConfigMap(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/cron-job-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const cronJobDetailItemInjectable = getInjectable({
 
     return {
       Component: CronJobDetails,
-      enabled: computed(() => isCronJob(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isCronJob(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/custom-resource-definitions-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const customResourceDefinitionsDetailItemInjectable = getInjectable({
 
     return {
       Component: CRDDetails,
-      enabled: computed(() => isCustomResourceDefinition(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isCustomResourceDefinition(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/daemon-set-detail-item.injectable.ts

@@ -22,7 +22,7 @@ const daemonSetDetailItemInjectable = getInjectable({
 
     return {
       Component: DaemonSetDetails,
-      enabled: computed(() => isDaemonSet(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isDaemonSet(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/deployment-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const deploymentDetailItemInjectable = getInjectable({
 
     return {
       Component: DeploymentDetails,
-      enabled: computed(() => isDeployment(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isDeployment(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/endpoints-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const endpointsDetailItemInjectable = getInjectable({
 
     return {
       Component: EndpointsDetails,
-      enabled: computed(() => isEndpoint(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isEndpoint(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/events-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const eventsDetailItemInjectable = getInjectable({
 
     return {
       Component: EventDetails,
-      enabled: computed(() => isEvent(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isEvent(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/horizontal-pod-autoscaler-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const horizontalPodAutoscalerDetailItemInjectable = getInjectable({
 
     return {
       Component: HpaDetails,
-      enabled: computed(() => isHorizontalPodAutoscaler(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isHorizontalPodAutoscaler(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/ingress-class-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const ingressClassDetailItemInjectable = getInjectable({
 
     return {
       Component: IngressClassDetails,
-      enabled: computed(() => isIngressClass(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isIngressClass(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/ingress-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const ingressDetailItemInjectable = getInjectable({
 
     return {
       Component: IngressDetails,
-      enabled: computed(() => isIngress(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isIngress(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/job-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const jobDetailItemInjectable = getInjectable({
 
     return {
       Component: JobDetails,
-      enabled: computed(() => isJob(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isJob(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/lease-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const leaseDetailItemInjectable = getInjectable({
 
     return {
       Component: LeaseDetails,
-      enabled: computed(() => isLease(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isLease(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/limit-range-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const limitRangeDetailItemInjectable = getInjectable({
 
     return {
       Component: LimitRangeDetails,
-      enabled: computed(() => isLimitRange(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isLimitRange(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/namespaces-detail-item.injectable.ts

@@ -22,7 +22,7 @@ const namespacesDetailItemInjectable = getInjectable({
 
     return {
       Component: NamespaceDetails,
-      enabled: computed(() => isNamespace(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isNamespace(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/network-policy-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const networkPolicyDetailItemInjectable = getInjectable({
 
     return {
       Component: NetworkPolicyDetails,
-      enabled: computed(() => isNetworkPolicy(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isNetworkPolicy(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/node-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const nodeDetailItemInjectable = getInjectable({
 
     return {
       Component: NodeDetails,
-      enabled: computed(() => isNode(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isNode(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-claim-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const persistentVolumeClaimDetailItemInjectable = getInjectable({
 
     return {
       Component: PersistentVolumeClaimDetails,
-      enabled: computed(() => isPersistentVolumeClaim(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isPersistentVolumeClaim(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/persistent-volume-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const persistentVolumeDetailItemInjectable = getInjectable({
 
     return {
       Component: PersistentVolumeDetails,
-      enabled: computed(() => isPersistentVolume(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isPersistentVolume(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const podDetailItemInjectable = getInjectable({
 
     return {
       Component: PodDetails,
-      enabled: computed(() => isPod(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isPod(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-disruption-budget-detail-item.injectable.ts

@@ -17,7 +17,7 @@ const podDisruptionBudgetDetailItemInjectable = getInjectable({
 
     return {
       Component: PodDisruptionBudgetDetails,
-      enabled: computed(() => kubeObject.get() instanceof PodDisruptionBudget),
+      enabled: computed(() => kubeObject.value.get() instanceof PodDisruptionBudget),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/pod-security-policy-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const podSecurityPolicyDetailItemInjectable = getInjectable({
 
     return {
       Component: PodSecurityPolicyDetails,
-      enabled: computed(() => isPodSecurityPolicy(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isPodSecurityPolicy(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/priority-class-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const priorityClassDetailItemInjectable = getInjectable({
 
     return {
       Component: PriorityClassesDetails,
-      enabled: computed(() => isPriorityClass(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isPriorityClass(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replica-set-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const replicaSetDetailItemInjectable = getInjectable({
 
     return {
       Component: ReplicaSetDetails,
-      enabled: computed(() => isReplicaSet(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isReplicaSet(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/replication-controller-detail-item.injectable.ts

@@ -22,7 +22,7 @@ const replicationControllerDetailItemInjectable = getInjectable({
 
     return {
       Component: ReplicationControllerDetails,
-      enabled: computed(() => isReplicationController(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isReplicationController(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/resource-quota-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const resourceQuotaDetailItemInjectable = getInjectable({
 
     return {
       Component: ResourceQuotaDetails,
-      enabled: computed(() => isResourceQuota(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isResourceQuota(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-binding-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const roleBindingDetailItemInjectable = getInjectable({
 
     return {
       Component: RoleBindingDetails,
-      enabled: computed(() => isRoleBinding(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isRoleBinding(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/role-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const roleDetailItemInjectable = getInjectable({
 
     return {
       Component: RoleDetails,
-      enabled: computed(() => isRole(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isRole(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/runtime-class-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const runtimeClassDetailItemInjectable = getInjectable({
 
     return {
       Component: RuntimeClassesDetails,
-      enabled: computed(() => isRuntimeClass(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isRuntimeClass(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/secrets-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const secretsDetailItemInjectable = getInjectable({
 
     return {
       Component: SecretDetails,
-      enabled: computed(() => isSecret(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isSecret(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-account-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const serviceAccountDetailItemInjectable = getInjectable({
 
     return {
       Component: ServiceAccountsDetails,
-      enabled: computed(() => isServiceAccount(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isServiceAccount(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/service-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const serviceDetailItemInjectable = getInjectable({
 
     return {
       Component: ServiceDetails,
-      enabled: computed(() => isService(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isService(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/stateful-set-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const statefulSetDetailItemInjectable = getInjectable({
 
     return {
       Component: StatefulSetDetails,
-      enabled: computed(() => isStatefulSet(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isStatefulSet(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/storage-class-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const storageClassDetailItemInjectable = getInjectable({
 
     return {
       Component: StorageClassDetails,
-      enabled: computed(() => isStorageClass(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isStorageClass(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/implementations/vertical-pod-autoscaler-detail-item.injectable.ts

@@ -20,7 +20,7 @@ const verticalPodAutoscalerDetailItemInjectable = getInjectable({
 
     return {
       Component: VpaDetails,
-      enabled: computed(() => isVerticalPodAutoscaler(kubeObject.get() as KubeObjectDetailsItem)),
+      enabled: computed(() => isVerticalPodAutoscaler(kubeObject.value.get() as KubeObjectDetailsItem)),
       orderNumber: 10,
     };
   },

packages/core/src/renderer/components/kube-object-details/kube-object-detail-items/kube-object-detail-item-registrator.injectable.ts

@@ -58,7 +58,7 @@ const kubeObjectDetailItemRegistratorInjectable = getInjectable({
                   return false;
                 }
 
-                if (!isRelevantKubeObject(kubeObject.get() as KubeObjectDetailsItem)) {
+                if (!isRelevantKubeObject(kubeObject.value.get() as KubeObjectDetailsItem)) {
                   return false;
                 }
 

packages/core/src/renderer/components/kube-object-details/kube-object-details.tsx

@@ -13,13 +13,13 @@ import { KubeObject } from "../../../common/k8s-api/kube-object";
 import { Spinner } from "../spinner";
 import { KubeObjectMenu } from "../kube-object-menu";
 import type { HideDetails } from "../kube-detail-params/hide-details.injectable";
-import { withInjectables } from "@ogre-tools/injectable-react";
 import hideDetailsInjectable from "../kube-detail-params/hide-details.injectable";
+import { type IAsyncComputed, withInjectables } from "@ogre-tools/injectable-react";
 import kubeObjectDetailItemsInjectable
   from "./kube-object-detail-items/kube-object-detail-items.injectable";
 import type {
   KubeObjectDetailsItem,
-  KubeObjectDetailsComputedValue,
+  KubeObjectDetailsValue,
 } from "./current-kube-object-in-details.injectable";
 import currentKubeObjectInDetailsInjectable from "./current-kube-object-in-details.injectable";
 
@@ -30,7 +30,7 @@ export interface KubeObjectDetailsProps<Kube extends KubeObject = KubeObject> {
 
 interface Dependencies {
   detailComponents: IComputedValue<React.ElementType[]>;
-  kubeObjectDetails: KubeObjectDetailsComputedValue;
+  kubeObjectDetails: IAsyncComputed<KubeObjectDetailsValue>;
   hideDetails: HideDetails;
 }
 
@@ -41,9 +41,9 @@ const NonInjectedKubeObjectDetails = observer((props: Dependencies) => {
     kubeObjectDetails,
   } = props;
 
-  const kubeObject = kubeObjectDetails.get();
+  const kubeObject = kubeObjectDetails.value.get();
   const isError = kubeObject instanceof Error;
-  const isLoading = !kubeObject && !isError;
+  const isLoading = kubeObjectDetails.pending.get();
 
   const title = (kubeObject instanceof KubeObject)
     ? `${kubeObject.kind}: ${kubeObject.getName()}`
@@ -62,7 +62,7 @@ const NonInjectedKubeObjectDetails = observer((props: Dependencies) => {
 
       {isError ? (
         <div className="box center">
-          Resource loading has failed: 
+          Resource loading has failed:
           {" "}
           <b>{String(kubeObject)}</b>
         </div>