fix: prevent infinite loading issue on video browser (#399)

* fix: prevent infinite loading issue on video browser

* fix: move assetDocuments array fallback to within useMemo

Author: larixk

src/hooks/useAssets.ts

@@ -1,5 +1,6 @@
 import {useMemo, useState} from 'react'
-import {collate, createHookFromObservableFactory, DocumentStore, useDocumentStore} from 'sanity'
+import {useObservable} from 'react-rx'
+import {collate, DocumentStore, useDocumentStore} from 'sanity'
 
 import {SANITY_API_VERSION} from '../hooks/useClient'
 import {createSearchFilter} from '../util/createSearchFilter'
@@ -14,44 +15,49 @@ export const ASSET_SORT_OPTIONS = {
 
 export type SortOption = keyof typeof ASSET_SORT_OPTIONS
 
-const useAssetDocuments = createHookFromObservableFactory<
-  VideoAssetDocument[],
-  {
-    documentStore: DocumentStore
-    sort: SortOption
-    searchQuery: string
-  }
->(({documentStore, sort, searchQuery}) => {
-  const search = createSearchFilter(searchQuery)
-  const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
+const useAssetDocuments = ({
+  documentStore,
+  sort,
+  searchQuery,
+}: {
+  documentStore: DocumentStore
+  sort: SortOption
+  searchQuery: string
+}): VideoAssetDocument[] | undefined => {
+  const memoizedObservable = useMemo(() => {
+    const search = createSearchFilter(searchQuery)
+    const filter = [`_type == "mux.videoAsset"`, ...search.filter].filter(Boolean).join(' && ')
+    const sortFragment = ASSET_SORT_OPTIONS[sort].groq
+    return documentStore.listenQuery(
+      /* groq */ `*[${filter}] | order(${sortFragment})`,
+      search.params,
+      {
+        apiVersion: SANITY_API_VERSION,
+      }
+    )
+  }, [documentStore, sort, searchQuery])
 
-  const sortFragment = ASSET_SORT_OPTIONS[sort].groq
-  return documentStore.listenQuery(
-    /* groq */ `*[${filter}] | order(${sortFragment})`,
-    search.params,
-    {
-      apiVersion: SANITY_API_VERSION,
-    }
-  )
-})
+  return useObservable(memoizedObservable, undefined)
+}
 
 export default function useAssets() {
   const documentStore = useDocumentStore()
   const [sort, setSort] = useState<SortOption>('createdDesc')
   const [searchQuery, setSearchQuery] = useState('')
 
-  const [assetDocuments = [], isLoading] = useAssetDocuments({documentStore, sort, searchQuery})
+  const assetDocumentsObservable = useAssetDocuments({documentStore, sort, searchQuery})
+  const isLoading = assetDocumentsObservable === undefined
   const assets = useMemo(
     () =>
       // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-      collate<VideoAssetDocument>(assetDocuments).map(
+      collate<VideoAssetDocument>(assetDocumentsObservable ?? []).map(
         (collated) =>
           ({
             ...(collated.draft || collated.published || {}),
             _id: collated.id,
           }) as VideoAssetDocument
       ),
-    [assetDocuments]
+    [assetDocumentsObservable]
   )
 
   return {