Preserve button focus during loading state

This change addresses an issue where the tree collapses when toggling to fetch child tree nodes in field lookups in other applications using this component.

Author: kosuke-k

src/scripts/TreeNode.tsx

@@ -47,6 +47,7 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
     selected,
     leaf,
     opened,
+    level = 0,
     children,
     itemRender: ItemRender,
     onClick,
@@ -58,28 +59,38 @@ const TreeNodeItem: FC<TreeNodeProps & { icon?: string }> = (props) => {
     'slds-is-open': opened,
     'slds-is-selected': selected,
   });
+  const spinnerClassNames = classnames(
+    'react-slds-spinner',
+    'slds-m-right_x-small'
+  );
+  const loadingPositionStyle = {
+    left: `${level}rem`,
+  };
   return (
     <div
       className={itmClassNames}
       onClick={onClick}
       style={{ position: 'relative' }}
       {...rprops}
     >
-      {loading ? (
+      {loading && (
         <Spinner
+          className={spinnerClassNames}
           container={false}
           size='small'
-          className='slds-m-right_x-small'
-          style={{ position: 'static', marginTop: 14, marginLeft: -2 }}
+          style={loadingPositionStyle}
         />
-      ) : !leaf ? (
+      )}
+      {!leaf ? (
         <Button
           className='slds-m-right_small'
           aria-controls=''
           type='icon-bare'
           icon={icon}
           iconSize='small'
           onClick={onToggle}
+          // Prevent focus loss during loading by keeping the toggle button in the DOM with opacity set to 0.
+          style={loading ? { opacity: 0, pointerEvents: 'none' } : undefined}
         />
       ) : null}
       <a
@@ -150,7 +161,7 @@ export const TreeNode: FC<TreeNodeProps> = (props) => {
     >
       <TreeNodeItem
         {...rprops}
-        {...{ leaf, opened, children, onClick, onLabelClick, onToggle }}
+        {...{ leaf, opened, level, children, onClick, onLabelClick, onToggle }}
       />
       {!leaf ? (
         <ul className={grpClassNames} role='group'>