TreeView: Remove loading indicator delay (#2518)

* Update async count story * Remove loading indicator delay * Fix focus style * Create wise-dogs-play.md
primer · Nov 2, 2022 · 60c36f5 · 60c36f5
1 parent 862f93c
commit 60c36f5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 15 deletions.
diff --git a/.changeset/wise-dogs-play.md b/.changeset/wise-dogs-play.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Remove loading indicator delay
diff --git a/src/TreeView/TreeView.stories.tsx b/src/TreeView/TreeView.stories.tsx
@@ -440,7 +440,7 @@ export const AsyncWithCount: Story = args => {
               ))}
             </TreeView.SubTree>
           </TreeView.Item>
-          <TreeView.LinkItem href="#src">
+          <TreeView.Item>
             <TreeView.LeadingVisual>
               <TreeView.DirectoryIcon />
             </TreeView.LeadingVisual>
@@ -452,7 +452,7 @@ export const AsyncWithCount: Story = args => {
                 </TreeView.LeadingVisual>
                 Avatar.tsx
               </TreeView.LinkItem>
-              <TreeView.LinkItem href="#button" current>
+              <TreeView.Item current>
                 <TreeView.LeadingVisual>
                   <TreeView.DirectoryIcon />
                 </TreeView.LeadingVisual>
@@ -471,15 +471,15 @@ export const AsyncWithCount: Story = args => {
                     Button.test.tsx
                   </TreeView.LinkItem>
                 </TreeView.SubTree>
-              </TreeView.LinkItem>
+              </TreeView.Item>
               <TreeView.Item>
                 <TreeView.LeadingVisual>
                   <FileIcon />
                 </TreeView.LeadingVisual>
                 ReallyLongFileNameThatShouldBeTruncated.tsx
               </TreeView.Item>
             </TreeView.SubTree>
-          </TreeView.LinkItem>
+          </TreeView.Item>
         </TreeView>
       </nav>
     </Box>

diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
@@ -225,7 +225,7 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
           sx={{
             outline: 'none',
             '&:focus-visible > div': {
-              boxShadow: (theme: Theme) => `inset 0 0 0 2px ${theme.colors.accent.emphasis}`,
+              boxShadow: (theme: Theme) => `inset 0 0 0 2px ${theme.colors.accent.fg}`,
               '@media (forced-colors: active)': {
                 outline: '2px solid HighlightText',
                 outlineOffset: -2
@@ -428,8 +428,7 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children}) => {
   const {announceUpdate} = React.useContext(RootContext)
   const {itemId, isExpanded, isSubTreeEmpty, setIsSubTreeEmpty} = React.useContext(ItemContext)
   const [isLoadingItemVisible, setIsLoadingItemVisible] = React.useState(false)
-  const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
-  const timeoutId = React.useRef<number>(0)
+  const {safeSetTimeout} = useSafeTimeout()
   const loadingItemRef = React.useRef<HTMLElement>(null)
   const ref = React.useRef<HTMLElement>(null)
 
@@ -467,26 +466,23 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children}) => {
     }
   }, [state, itemId, announceUpdate, safeSetTimeout])
 
-  // Show loading indicator after a short delay
+  // Manage loading indicator state
   React.useEffect(() => {
     // If we're in the loading state, but not showing the loading indicator yet,
-    // start a timer to show the loading indicator after a short delay.
+    // show the loading indicator
     if (state === 'loading' && !isLoadingItemVisible) {
-      timeoutId.current = safeSetTimeout(() => {
-        setIsLoadingItemVisible(true)
-      }, 300)
+      setIsLoadingItemVisible(true)
     }
 
     // If we're not in the loading state, but we're still showing a loading indicator,
     // hide the loading indicator and move focus if necessary
     if (state !== 'loading' && isLoadingItemVisible) {
       const isLoadingItemFocused = document.activeElement === loadingItemRef.current
 
-      safeClearTimeout(timeoutId.current)
       setIsLoadingItemVisible(false)
 
       if (isLoadingItemFocused) {
-        setTimeout(() => {
+        safeSetTimeout(() => {
           const parentElement = document.getElementById(itemId)
           if (!parentElement) return
 
@@ -500,7 +496,7 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({count, state, children}) => {
         })
       }
     }
-  }, [state, safeSetTimeout, safeClearTimeout, isLoadingItemVisible, itemId])
+  }, [state, safeSetTimeout, isLoadingItemVisible, itemId])
 
   if (!isExpanded) {
     return null