diff --git a/.changeset/fresh-frogs-smoke.md b/.changeset/fresh-frogs-smoke.md
new file mode 100644
index 00000000000..2a805242144
--- /dev/null
+++ b/.changeset/fresh-frogs-smoke.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Add `state` prop to `TreeView.SubTree` component
diff --git a/.changeset/light-coats-mate.md b/.changeset/light-coats-mate.md
new file mode 100644
index 00000000000..5b7b684b340
--- /dev/null
+++ b/.changeset/light-coats-mate.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+TreeView: Improve accessibility of async items 
diff --git a/docs/content/TreeView.mdx b/docs/content/TreeView.mdx
index 0c0250368c5..823847beffc 100644
--- a/docs/content/TreeView.mdx
+++ b/docs/content/TreeView.mdx
@@ -278,6 +278,37 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
 
 <PropsTable>
   <PropsTableRow name="children" type="React.ReactNode" />
+  <PropsTableRow
+    name="state"
+    type={`| 'initial' 
+| 'loading'
+| 'done'
+| 'error'`}
+    description={
+      <>
+        <p>Specify a state if items in the subtree are loaded asynchronously.</p>
+        <p>
+          An asynchronous subtree can be in one of the following states:
+          <ul>
+            <li>
+              <InlineCode>initial</InlineCode>: Items are neither loaded nor loading.
+            </li>
+            <li>
+              <InlineCode>loading</InlineCode>: Currently loading items. The subtree will render a loading indicator
+              when in this state (after a 300ms delay).
+            </li>
+            <li>
+              <InlineCode>done</InlineCode>: Done loading items. Screen readers will announce when a subtree enters this
+              state.
+            </li>
+            <li>
+              <InlineCode>error</InlineCode>: An error occured while loading items.
+            </li>
+          </ul>
+        </p>
+      </>
+    }
+  />
   {/* <PropsTableSxRow /> */}
 </PropsTable>
 
diff --git a/src/TreeView/TreeView.stories.tsx b/src/TreeView/TreeView.stories.tsx
index e6b8296c9d2..f7f69ade55f 100644
--- a/src/TreeView/TreeView.stories.tsx
+++ b/src/TreeView/TreeView.stories.tsx
@@ -7,7 +7,7 @@ import Box from '../Box'
 import {Button} from '../Button'
 import {ConfirmationDialog} from '../Dialog/ConfirmationDialog'
 import StyledOcticon from '../StyledOcticon'
-import {TreeView} from './TreeView'
+import {SubTreeState, TreeView} from './TreeView'
 
 const meta: Meta = {
   title: 'Components/TreeView',
@@ -409,6 +409,14 @@ export const AsyncSuccess: Story = args => {
   const [isLoading, setIsLoading] = React.useState(false)
   const [asyncItems, setAsyncItems] = React.useState<string[]>([])
 
+  let state: SubTreeState = 'initial'
+
+  if (isLoading) {
+    state = 'loading'
+  } else if (asyncItems.length > 0) {
+    state = 'done'
+  }
+
   return (
     <Box sx={{p: 3}}>
       <nav aria-label="File navigation">
@@ -416,13 +424,11 @@ export const AsyncSuccess: Story = args => {
           <TreeView.Item
             onExpandedChange={async isExpanded => {
               if (asyncItems.length === 0 && isExpanded) {
-                // Show loading indicator after a short delay
-                const timeout = setTimeout(() => setIsLoading(true), 300)
+                setIsLoading(true)
 
                 // Load items
                 const items = await loadItems(args.responseTime)
 
-                clearTimeout(timeout)
                 setIsLoading(false)
                 setAsyncItems(items)
               }
@@ -432,8 +438,7 @@ export const AsyncSuccess: Story = args => {
               <TreeView.DirectoryIcon />
             </TreeView.LeadingVisual>
             Directory with async items
-            <TreeView.SubTree>
-              {isLoading ? <TreeView.LoadingItem /> : null}
+            <TreeView.SubTree state={state}>
               {asyncItems.map(item => (
                 <TreeView.Item key={item}>
                   <TreeView.LeadingVisual>
@@ -466,10 +471,20 @@ export const AsyncError: Story = args => {
   const [asyncItems, setAsyncItems] = React.useState<string[]>([])
   const [error, setError] = React.useState<Error | null>(null)
 
+  let state: SubTreeState = 'initial'
+
+  if (isLoading) {
+    state = 'loading'
+  } else if (error) {
+    state = 'error'
+  } else if (asyncItems.length > 0) {
+    state = 'done'
+  }
+
   async function loadItems() {
     if (asyncItems.length === 0) {
-      // Show loading indicator after a short delay
-      const timeout = setTimeout(() => setIsLoading(true), 300)
+      setIsLoading(true)
+
       try {
         // Try to load items
         const items = await alwaysFails(args.responseTime)
@@ -477,7 +492,6 @@ export const AsyncError: Story = args => {
       } catch (error) {
         setError(error as Error)
       } finally {
-        clearTimeout(timeout)
         setIsLoading(false)
       }
     }
@@ -501,8 +515,7 @@ export const AsyncError: Story = args => {
               <TreeView.DirectoryIcon />
             </TreeView.LeadingVisual>
             Directory with async items
-            <TreeView.SubTree>
-              {isLoading ? <TreeView.LoadingItem /> : null}
+            <TreeView.SubTree state={state}>
               {error ? (
                 <ConfirmationDialog
                   title="Error"
diff --git a/src/TreeView/TreeView.test.tsx b/src/TreeView/TreeView.test.tsx
index bfa5cafc2ff..3627865ae83 100644
--- a/src/TreeView/TreeView.test.tsx
+++ b/src/TreeView/TreeView.test.tsx
@@ -1,7 +1,7 @@
 import {fireEvent, render} from '@testing-library/react'
 import React from 'react'
 import {ThemeProvider} from '../ThemeProvider'
-import {TreeView} from './TreeView'
+import {SubTreeState, TreeView} from './TreeView'
 
 // TODO: Move this function into a shared location
 function renderWithTheme(
@@ -1025,3 +1025,88 @@ describe('Controlled state', () => {
     expect(child).not.toBeVisible()
   })
 })
+
+describe('Asyncronous loading', () => {
+  it('updates aria live region when loading is done', () => {
+    function TestTree() {
+      const [state, setState] = React.useState<SubTreeState>('loading')
+
+      return (
+        <div>
+          {/* Mimic the completion of async loading by clicking the button */}
+          <button onClick={() => setState('done')}>Done</button>
+          <TreeView aria-label="Test tree">
+            <TreeView.Item defaultExpanded>
+              Parent
+              <TreeView.SubTree state={state}>
+                <TreeView.Item>Child</TreeView.Item>
+              </TreeView.SubTree>
+            </TreeView.Item>
+          </TreeView>
+        </div>
+      )
+    }
+    const {getByRole} = renderWithTheme(<TestTree />)
+
+    const doneButton = getByRole('button', {name: 'Done'})
+    const liveRegion = getByRole('status')
+
+    // Live region should be empty
+    expect(liveRegion).toHaveTextContent('')
+
+    // Click done button to mimic the completion of async loading
+    fireEvent.click(doneButton)
+
+    // Live region should be updated
+    expect(liveRegion).toHaveTextContent('Parent content loaded')
+  })
+
+  it('moves active descendant from loading item to first child', async () => {
+    function TestTree() {
+      const [state, setState] = React.useState<SubTreeState>('loading')
+
+      React.useEffect(() => {
+        const timer = setTimeout(() => setState('done'), 400)
+        return () => clearTimeout(timer)
+      }, [])
+
+      return (
+        <TreeView aria-label="Test tree">
+          <TreeView.Item defaultExpanded>
+            Parent
+            <TreeView.SubTree state={state}>
+              <TreeView.Item>Child 1</TreeView.Item>
+              <TreeView.Item>Child 2</TreeView.Item>
+            </TreeView.SubTree>
+          </TreeView.Item>
+        </TreeView>
+      )
+    }
+
+    const {getByRole, findByRole} = renderWithTheme(<TestTree />)
+
+    const root = getByRole('tree')
+    const parentItem = getByRole('treeitem', {name: 'Parent'})
+    const loadingItem = await findByRole('treeitem', {name: 'Loading...'})
+
+    // Focus tree
+    root.focus()
+
+    // aria-activedescendant should be set to parent item
+    expect(root).toHaveAttribute('aria-activedescendant', parentItem.id)
+
+    // Press ↓ to move aria-activedescendant to loading item
+    fireEvent.keyDown(document.activeElement || document.body, {key: 'ArrowDown'})
+
+    // aria-activedescendant should now be set to loading item
+    expect(root).toHaveAttribute('aria-activedescendant', loadingItem.id)
+
+    // Wait for async loading to complete
+    const firstChild = await findByRole('treeitem', {name: 'Child 1'})
+
+    setTimeout(() => {
+      // aria-activedescendant should now be set to first child
+      expect(root).toHaveAttribute('aria-activedescendant', firstChild.id)
+    })
+  })
+})
diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
index 551a05c8513..a1df75b47dc 100644
--- a/src/TreeView/TreeView.tsx
+++ b/src/TreeView/TreeView.tsx
@@ -9,30 +9,38 @@ import React from 'react'
 import styled from 'styled-components'
 import Box from '../Box'
 import {useControllableState} from '../hooks/useControllableState'
+import useSafeTimeout from '../hooks/useSafeTimeout'
 import Spinner from '../Spinner'
 import StyledOcticon from '../StyledOcticon'
 import sx, {SxProp} from '../sx'
 import Text from '../Text'
 import {Theme} from '../ThemeProvider'
 import createSlots from '../utils/create-slots'
-import {useActiveDescendant} from './useActiveDescendant'
+import VisuallyHidden from '../_VisuallyHidden'
+import {getAccessibleName} from './shared'
+import {getFirstChildElement, useActiveDescendant} from './useActiveDescendant'
 import {useTypeahead} from './useTypeahead'
 
 // ----------------------------------------------------------------------------
 // Context
 
 const RootContext = React.createContext<{
+  announceUpdate: (message: string) => void
   activeDescendant: string
-  setActiveDescendant?: React.Dispatch<React.SetStateAction<string>>
+  setActiveDescendant: React.Dispatch<React.SetStateAction<string>>
 }>({
-  activeDescendant: ''
+  announceUpdate: () => {},
+  activeDescendant: '',
+  setActiveDescendant: () => {}
 })
 
 const ItemContext = React.createContext<{
+  itemId: string
   level: number
   isExpanded: boolean
   expandParents: () => void
 }>({
+  itemId: '',
   level: 1,
   isExpanded: false,
   expandParents: () => {}
@@ -51,6 +59,7 @@ const UlBox = styled.ul<SxProp>(sx)
 
 const Root: React.FC<TreeViewProps> = ({'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children}) => {
   const containerRef = React.useRef<HTMLUListElement>(null)
+  const [ariaLiveMessage, setAriaLiveMessage] = React.useState('')
 
   const [activeDescendant, setActiveDescendant] = useActiveDescendant({containerRef})
 
@@ -59,30 +68,41 @@ const Root: React.FC<TreeViewProps> = ({'aria-label': ariaLabel, 'aria-labelledb
     onFocusChange: element => setActiveDescendant(element.id)
   })
 
+  const announceUpdate = React.useCallback((message: string) => {
+    setAriaLiveMessage(message)
+  }, [])
+
   return (
-    <RootContext.Provider value={{activeDescendant, setActiveDescendant}}>
-      <UlBox
-        ref={containerRef}
-        tabIndex={0}
-        role="tree"
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledby}
-        aria-activedescendant={activeDescendant}
-        sx={{
-          listStyle: 'none',
-          padding: 0,
-          margin: 0,
-          // We'll display a focus ring around the active descendant
-          // instead of the tree itself
-          outline: 0
-        }}
-      >
-        {children}
-      </UlBox>
+    <RootContext.Provider value={{announceUpdate, activeDescendant, setActiveDescendant}}>
+      <>
+        <VisuallyHidden role="status" aria-live="polite">
+          {ariaLiveMessage}
+        </VisuallyHidden>
+        <UlBox
+          ref={containerRef}
+          tabIndex={0}
+          role="tree"
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          aria-activedescendant={activeDescendant}
+          sx={{
+            listStyle: 'none',
+            padding: 0,
+            margin: 0,
+            // We'll display a focus ring around the active descendant
+            // instead of the tree itself
+            outline: 0
+          }}
+        >
+          {children}
+        </UlBox>
+      </>
     </RootContext.Provider>
   )
 }
 
+Root.displayName = 'TreeView'
+
 // ----------------------------------------------------------------------------
 // TreeView.Item
 
@@ -184,7 +204,7 @@ const Item: React.FC<TreeViewItemProps> = ({
   }, [toggle, onSelect, setIsExpanded])
 
   return (
-    <ItemContext.Provider value={{level: level + 1, isExpanded, expandParents: expandParentsAndSelf}}>
+    <ItemContext.Provider value={{itemId, level: level + 1, isExpanded, expandParents: expandParentsAndSelf}}>
       <li
         id={itemId}
         ref={itemRef}
@@ -196,7 +216,7 @@ const Item: React.FC<TreeViewItemProps> = ({
       >
         <Box
           onClick={event => {
-            setActiveDescendant?.(itemId)
+            setActiveDescendant(itemId)
             if (onSelect) {
               onSelect(event)
             } else {
@@ -259,7 +279,7 @@ const Item: React.FC<TreeViewItemProps> = ({
             <Box
               onClick={event => {
                 if (onSelect) {
-                  setActiveDescendant?.(itemId)
+                  setActiveDescendant(itemId)
                   toggle(event)
                 }
               }}
@@ -352,6 +372,8 @@ const LevelIndicatorLines: React.FC<{level: number}> = ({level}) => {
   )
 }
 
+Item.displayName = 'TreeView.Item'
+
 // ----------------------------------------------------------------------------
 // TreeView.LinkItem
 
@@ -372,32 +394,72 @@ const LinkItem: React.FC<TreeViewLinkItemProps> = ({href, onSelect, ...props}) =
   )
 }
 
-// ----------------------------------------------------------------------------
-// TreeView.LoadingItem
-
-const LoadingItem: React.FC = () => {
-  return (
-    // TODO: What aria attributes do we need to add here?
-    <Item>
-      <LeadingVisual>
-        <Spinner size="small" />
-      </LeadingVisual>
-      <Text sx={{color: 'fg.muted'}}>Loading...</Text>
-    </Item>
-  )
-}
-
-LoadingItem.displayName = 'TreeView.LoadingItem'
+LinkItem.displayName = 'TreeView.LinkItem'
 
 // ----------------------------------------------------------------------------
 // TreeView.SubTree
 
+export type SubTreeState = 'initial' | 'loading' | 'done' | 'error'
+
 export type TreeViewSubTreeProps = {
   children?: React.ReactNode
+  state?: SubTreeState
 }
 
-const SubTree: React.FC<TreeViewSubTreeProps> = ({children}) => {
-  const {isExpanded} = React.useContext(ItemContext)
+const SubTree: React.FC<TreeViewSubTreeProps> = ({state, children}) => {
+  const {activeDescendant, setActiveDescendant, announceUpdate} = React.useContext(RootContext)
+  const {itemId, isExpanded} = React.useContext(ItemContext)
+  const [isLoadingItemVisible, setIsLoadingItemVisible] = React.useState(false)
+  const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
+  const timeoutId = React.useRef<number>(0)
+  const activeDescendantRef = React.useRef(activeDescendant)
+
+  React.useEffect(() => {
+    activeDescendantRef.current = activeDescendant
+  }, [activeDescendant])
+
+  // Announce when content has loaded
+  React.useEffect(() => {
+    if (state === 'done') {
+      const parentItem = document.getElementById(itemId)
+
+      if (!parentItem) return
+
+      const parentName = getAccessibleName(parentItem)
+      announceUpdate(`${parentName} content loaded`)
+    }
+  }, [state, itemId, announceUpdate])
+
+  // Show loading indicator after a short delay
+  React.useEffect(() => {
+    if (state === 'loading' && !isLoadingItemVisible) {
+      timeoutId.current = safeSetTimeout(() => {
+        setIsLoadingItemVisible(true)
+      }, 300)
+    }
+
+    if (state !== 'loading' && isLoadingItemVisible) {
+      safeClearTimeout(timeoutId.current)
+      setIsLoadingItemVisible(false)
+
+      // If the active descendant was removed from the DOM after hiding the
+      // LoadingItem, we know the LoadingItem was the active descendant
+      // and we need to update the active descendant to the first loaded item
+      // or the parent item (if the subtree is empty).
+      setTimeout(() => {
+        const activeElement = document.getElementById(activeDescendantRef.current)
+
+        if (!activeElement) {
+          const parentElement = document.getElementById(itemId)
+          if (!parentElement) return
+
+          const firstChild = getFirstChildElement(parentElement)
+          setActiveDescendant(firstChild ? firstChild.id : parentElement.id)
+        }
+      })
+    }
+  }, [state, safeSetTimeout, safeClearTimeout, setActiveDescendant, isLoadingItemVisible, itemId])
+
   return (
     <Box
       as="ul"
@@ -409,11 +471,24 @@ const SubTree: React.FC<TreeViewSubTreeProps> = ({children}) => {
         margin: 0
       }}
     >
-      {children}
+      {isLoadingItemVisible ? <LoadingItem /> : children}
     </Box>
   )
 }
 
+SubTree.displayName = 'TreeView.SubTree'
+
+const LoadingItem = () => {
+  return (
+    <Item>
+      <LeadingVisual>
+        <Spinner size="small" />
+      </LeadingVisual>
+      <Text sx={{color: 'fg.muted'}}>Loading...</Text>
+    </Item>
+  )
+}
+
 function useSubTree(children: React.ReactNode) {
   return React.useMemo(() => {
     const subTree = React.Children.toArray(children).find(
@@ -449,6 +524,8 @@ const LeadingVisual: React.FC<TreeViewVisualProps> = props => {
   )
 }
 
+LeadingVisual.displayName = 'TreeView.LeadingVisual'
+
 const TrailingVisual: React.FC<TreeViewVisualProps> = props => {
   const {isExpanded} = React.useContext(ItemContext)
   const children = typeof props.children === 'function' ? props.children({isExpanded}) : props.children
@@ -459,6 +536,8 @@ const TrailingVisual: React.FC<TreeViewVisualProps> = props => {
   )
 }
 
+TrailingVisual.displayName = 'TreeView.TrailingVisual'
+
 // ----------------------------------------------------------------------------
 // TreeView.DirectoryIcon
 
@@ -475,7 +554,6 @@ const DirectoryIcon = () => {
 export const TreeView = Object.assign(Root, {
   Item,
   LinkItem,
-  LoadingItem,
   SubTree,
   LeadingVisual,
   TrailingVisual,
diff --git a/src/TreeView/shared.ts b/src/TreeView/shared.ts
new file mode 100644
index 00000000000..dcb55010480
--- /dev/null
+++ b/src/TreeView/shared.ts
@@ -0,0 +1,11 @@
+/**
+ * Returns the accessible name of an element
+ */
+export function getAccessibleName(element: Element) {
+  const label = element.getAttribute('aria-label')
+  const labelledby = element.getAttribute('aria-labelledby')
+
+  if (label) return label
+  if (labelledby) return document.getElementById(labelledby)?.textContent ?? ''
+  return element.textContent ?? ''
+}
diff --git a/src/TreeView/useActiveDescendant.ts b/src/TreeView/useActiveDescendant.ts
index 146d7087788..15211ce8c27 100644
--- a/src/TreeView/useActiveDescendant.ts
+++ b/src/TreeView/useActiveDescendant.ts
@@ -111,7 +111,7 @@ export function getNextFocusableElement(activeElement: HTMLElement, event: Keybo
   }
 }
 
-function getElementState(element: HTMLElement): 'open' | 'closed' | 'end' {
+export function getElementState(element: HTMLElement): 'open' | 'closed' | 'end' {
   if (element.getAttribute('role') !== 'treeitem') {
     throw new Error('Element is not a treeitem')
   }
@@ -126,7 +126,7 @@ function getElementState(element: HTMLElement): 'open' | 'closed' | 'end' {
   }
 }
 
-function getVisibleElement(element: HTMLElement, direction: 'next' | 'previous'): HTMLElement | undefined {
+export function getVisibleElement(element: HTMLElement, direction: 'next' | 'previous'): HTMLElement | undefined {
   const root = element.closest('[role=tree]')
 
   if (!root) return
@@ -152,24 +152,24 @@ function getVisibleElement(element: HTMLElement, direction: 'next' | 'previous')
   return next instanceof HTMLElement ? next : undefined
 }
 
-function getFirstChildElement(element: HTMLElement): HTMLElement | undefined {
+export function getFirstChildElement(element: HTMLElement): HTMLElement | undefined {
   const firstChild = element.querySelector('[role=treeitem]')
   return firstChild instanceof HTMLElement ? firstChild : undefined
 }
 
-function getParentElement(element: HTMLElement): HTMLElement | undefined {
+export function getParentElement(element: HTMLElement): HTMLElement | undefined {
   const group = element.closest('[role=group]')
   const parent = group?.closest('[role=treeitem]')
   return parent instanceof HTMLElement ? parent : undefined
 }
 
-function getFirstElement(element: HTMLElement): HTMLElement | undefined {
+export function getFirstElement(element: HTMLElement): HTMLElement | undefined {
   const root = element.closest('[role=tree]')
   const first = root?.querySelector('[role=treeitem]')
   return first instanceof HTMLElement ? first : undefined
 }
 
-function getLastElement(element: HTMLElement): HTMLElement | undefined {
+export function getLastElement(element: HTMLElement): HTMLElement | undefined {
   const root = element.closest('[role=tree]')
   const items = Array.from(root?.querySelectorAll('[role=treeitem]') || [])
 
diff --git a/src/TreeView/useTypeahead.ts b/src/TreeView/useTypeahead.ts
index 3966e616b21..262744aeb17 100644
--- a/src/TreeView/useTypeahead.ts
+++ b/src/TreeView/useTypeahead.ts
@@ -1,5 +1,6 @@
 import React from 'react'
 import useSafeTimeout from '../hooks/useSafeTimeout'
+import {getAccessibleName} from './shared'
 
 type TypeaheadOptions = {
   containerRef: React.RefObject<HTMLElement>
@@ -85,18 +86,6 @@ export function useTypeahead({containerRef, onFocusChange}: TypeaheadOptions) {
   }, [searchValue, containerRef])
 }
 
-/**
- * Returns the accessible name of an element
- */
-function getAccessibleName(element: Element) {
-  const label = element.getAttribute('aria-label')
-  const labelledby = element.getAttribute('aria-labelledby')
-
-  if (label) return label
-  if (labelledby) return document.getElementById(labelledby)?.textContent ?? ''
-  return element.textContent ?? ''
-}
-
 /**
  * Wraps an array around itself at a given start index
  *