fix: selectedKeys are not present in the collection warning in async …

…case (#2648)

* fix(hook): add AsyncLoadable & show warning after data is loaded

* fix(hooks): change isLoading default state to true

* refactor(hooks): move the logic to missingKeys

* refactor(changeset): rephrase changeset description

.changeset/rare-plums-speak.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/stories-utils": patch
+---
+
+Fixed an issue where a warning was triggered in the Select component when `defaultSelectedKeys` were used and items were still loading (#2605).

packages/hooks/use-aria-multiselect/src/use-multiselect-list-state.ts

@@ -1,8 +1,11 @@
 import {ListState, useListState} from "@react-stately/list";
-import {CollectionBase, MultipleSelection, Node} from "@react-types/shared";
+import {CollectionBase, MultipleSelection, AsyncLoadable, Node} from "@react-types/shared";
 import {Key, useMemo} from "react";
 
-export interface MultiSelectListProps<T> extends CollectionBase<T>, MultipleSelection {}
+export interface MultiSelectListProps<T>
+  extends CollectionBase<T>,
+    AsyncLoadable,
+    MultipleSelection {}
 
 export interface MultiSelectListState<T> extends ListState<T> {
   /** The keys for the currently selected items. */
@@ -26,7 +29,7 @@ export function useMultiSelectListState<T extends object>(
   } = useListState<T>(props);
 
   const missingKeys: Key[] = useMemo(() => {
-    if (selectedKeys.size !== 0) {
+    if (!props.isLoading && selectedKeys.size !== 0) {
       return Array.from(selectedKeys)
         .filter(Boolean)
         .filter((key) => !collection.getItem(`${key}`));

packages/utilities/stories-utils/src/hooks/use-pokemon-list.ts

@@ -14,7 +14,7 @@ export type UsePokemonListProps = {
 export function usePokemonList({fetchDelay = 0}: UsePokemonListProps = {}) {
   const [items, setItems] = useState<Pokemon[]>([]);
   const [hasMore, setHasMore] = useState(true);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const [offset, setOffset] = useState(0);
   const limit = 20; // Number of items per page, adjust as necessary