fix: load first page of uploads list in provider (#288)

rather than doing this in the headless component, do it in the Provider
so that all users (especially hook users) automatically get a first page of results

packages/react-uploads-list/src/UploadsList.tsx

@@ -1,7 +1,7 @@
 import type { As, Component, Props, Options, RenderProp } from 'ariakit-react-utils'
 import type { UploadsListContextState, UploadsListContextActions } from '@w3ui/uploads-list-core'
 
-import React, { Fragment, createContext, useContext, useMemo, useCallback, useEffect } from 'react'
+import React, { Fragment, createContext, useContext, useMemo, useCallback } from 'react'
 import { createComponent, createElement } from 'ariakit-react-utils'
 import { useUploadsList } from './providers/UploadsList'
 
@@ -68,10 +68,6 @@ export const UploadsListRoot = (props: UploadsListRootProps): JSX.Element => {
   } else {
     renderedChildren = children as React.ReactNode
   }
-  useEffect(() => {
-    // load the first page of results asynchronously
-    void actions.next()
-  }, [])
   return (
     <UploadsListComponentContext.Provider value={contextValue}>
       {renderedChildren}

packages/react-uploads-list/src/providers/UploadsList.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, createContext, useState } from 'react'
+import React, { useContext, createContext, useState, useEffect } from 'react'
 import { UploadListResult, UploadsListContextState, UploadsListContextActions, ServiceConfig, list } from '@w3ui/uploads-list-core'
 import { useKeyring } from '@w3ui/react-keyring'
 import { list as uploadList } from '@web3-storage/capabilities/upload'
@@ -82,6 +82,9 @@ export function UploadsListProvider ({ size, servicePrincipal, connection, child
     }
   }
 
+  // we should reload the page any time the space or agent change
+  useEffect(() => { void loadPage() }, [space, agent])
+
   return (
     <UploadsListContext.Provider value={[state, actions]}>
       {children}