Optimise getting entity metadata in explorer

Author: axelboc

packages/app/src/explorer/EntityList.tsx

@@ -1,5 +1,6 @@
 import { assertGroup } from '@h5web/shared/guards';
 import { buildEntityPath } from '@h5web/shared/hdf5-utils';
+import { useDeferredValue } from 'react';
 
 import { useEntity } from '../hooks';
 import EntityItem from './EntityItem';
@@ -15,7 +16,8 @@ interface Props {
 function EntityList(props: Props) {
   const { level, parentPath, selectedPath, onSelect } = props;
 
-  const group = useEntity(parentPath);
+  const parentPathDef = useDeferredValue(parentPath);
+  const group = useEntity(parentPathDef);
   assertGroup(group);
 
   if (group.children.length === 0) {
@@ -30,7 +32,7 @@ function EntityList(props: Props) {
         return (
           <EntityItem
             key={name}
-            path={buildEntityPath(parentPath, name)}
+            path={buildEntityPath(parentPathDef, name)}
             entity={entity}
             level={level}
             selectedPath={selectedPath}