feat: integrate CollectionIndexProvider for optimized collection indexing

Author: bra-i-am

src/library-authoring/LibraryAuthoringPage.tsx

@@ -38,7 +38,7 @@ import {
 } from '../search-manager';
 import LibraryContent from './LibraryContent';
 import { LibrarySidebar } from './library-sidebar';
-import { useComponentPickerContext } from './common/context/ComponentPickerContext';
+import { useComponentPickerContext, CollectionIndexProvider } from './common/context/ComponentPickerContext';
 import { useLibraryContext } from './common/context/LibraryContext';
 import { SidebarBodyComponentId, useSidebarContext } from './common/context/SidebarContext';
 import { allLibraryPageTabs, ContentType, useLibraryRoutes } from './routes';
@@ -284,38 +284,40 @@ const LibraryAuthoringPage = ({
             extraFilter={extraFilter}
             overrideTypesFilter={overrideTypesFilter}
           >
-            <SubHeader
-              title={<SubHeaderTitle title={libraryData.title} />}
-              subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
-              breadcrumbs={breadcumbs}
-              headerActions={<HeaderActions />}
-              hideBorder
-            />
-            <Tabs
-              variant="tabs"
-              activeKey={activeKey}
-              onSelect={handleTabChange}
-              className="my-3"
-            >
-              {visibleTabsToRender}
-            </Tabs>
-            <ActionRow className="my-3">
-              <SearchKeywordsField className="mr-3" />
-              <FilterByTags />
-              {!(insideCollections || insideUnits) && <FilterByBlockType />}
-              <LibraryFilterByPublished key={
-                // It is necessary to re-render `LibraryFilterByPublished` every time `FilterByBlockType`
-                // appears or disappears, this is because when the menu is opened it is rendered
-                // in a previous state, causing an inconsistency in its position.
-                // By changing the key we can re-render the component.
-                !(insideCollections || insideUnits) ? 'filter-published-1' : 'filter-published-2'
-              }
+            <CollectionIndexProvider>
+              <SubHeader
+                title={<SubHeaderTitle title={libraryData.title} />}
+                subtitle={!componentPickerMode ? intl.formatMessage(messages.headingSubtitle) : undefined}
+                breadcrumbs={breadcumbs}
+                headerActions={<HeaderActions />}
+                hideBorder
               />
-              <ClearFiltersButton />
-              <ActionRow.Spacer />
-              <SearchSortWidget />
-            </ActionRow>
-            <LibraryContent contentType={activeKey} />
+              <Tabs
+                variant="tabs"
+                activeKey={activeKey}
+                onSelect={handleTabChange}
+                className="my-3"
+              >
+                {visibleTabsToRender}
+              </Tabs>
+              <ActionRow className="my-3">
+                <SearchKeywordsField className="mr-3" />
+                <FilterByTags />
+                {!(insideCollections || insideUnits) && <FilterByBlockType />}
+                <LibraryFilterByPublished key={
+                  // It is necessary to re-render `LibraryFilterByPublished` every time `FilterByBlockType`
+                  // appears or disappears, this is because when the menu is opened it is rendered
+                  // in a previous state, causing an inconsistency in its position.
+                  // By changing the key we can re-render the component.
+                  !(insideCollections || insideUnits) ? 'filter-published-1' : 'filter-published-2'
+                }
+                />
+                <ClearFiltersButton />
+                <ActionRow.Spacer />
+                <SearchSortWidget />
+              </ActionRow>
+              <LibraryContent contentType={activeKey} />
+            </CollectionIndexProvider>
           </SearchContextProvider>
         </Container>
         {!componentPickerMode && <StudioFooterSlot containerProps={{ size: undefined }} />}

src/library-authoring/collections/LibraryCollectionPage.tsx

@@ -29,7 +29,7 @@ import {
 } from '../../search-manager';
 import { SubHeaderTitle } from '../LibraryAuthoringPage';
 import { useCollection, useContentLibrary } from '../data/apiHooks';
-import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
+import { useComponentPickerContext, CollectionIndexProvider } from '../common/context/ComponentPickerContext';
 import { useLibraryContext } from '../common/context/LibraryContext';
 import { SidebarBodyComponentId, useSidebarContext } from '../common/context/SidebarContext';
 import messages from './messages';
@@ -208,22 +208,24 @@ const LibraryCollectionPage = () => {
           <SearchContextProvider
             extraFilter={extraFilter}
           >
-            <SubHeader
-              title={<SubHeaderTitle title={collectionData.title} />}
-              breadcrumbs={breadcrumbs}
-              headerActions={<HeaderActions />}
-              hideBorder
-            />
-            <ActionRow className="my-3">
-              <SearchKeywordsField className="mr-3" />
-              <FilterByTags />
-              <FilterByBlockType />
-              <LibraryFilterByPublished />
-              <ClearFiltersButton />
-              <ActionRow.Spacer />
-              <SearchSortWidget />
-            </ActionRow>
-            <LibraryCollectionComponents />
+            <CollectionIndexProvider>
+              <SubHeader
+                title={<SubHeaderTitle title={collectionData.title} />}
+                breadcrumbs={breadcrumbs}
+                headerActions={<HeaderActions />}
+                hideBorder
+              />
+              <ActionRow className="my-3">
+                <SearchKeywordsField className="mr-3" />
+                <FilterByTags />
+                <FilterByBlockType />
+                <LibraryFilterByPublished />
+                <ClearFiltersButton />
+                <ActionRow.Spacer />
+                <SearchSortWidget />
+              </ActionRow>
+              <LibraryCollectionComponents />
+            </CollectionIndexProvider>
           </SearchContextProvider>
         </Container>
         {!componentPickerMode && <StudioFooterSlot containerProps={{ size: undefined }} />}

src/library-authoring/common/context/ComponentPickerContext.tsx

@@ -5,8 +5,12 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { ContentHit } from 'search-manager';
-import { useSearchContext } from 'search-manager/SearchManager';
+import { ContentHit, useSearchContext } from 'search-manager';
+
+/**
+ * Provides pre-computed collection indexing data to avoid repeated computation.
+ */
+const CollectionIndexContext = createContext<CollectionIndexData | undefined>(undefined);
 
 export interface SelectedComponent {
   usageKey: string;
@@ -176,6 +180,40 @@ export const useCollectionIndexing = (
   };
 }, [hits]);
 
+type CollectionIndexProviderProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * React component to provide pre-computed collection indexing data.
+ * Must be rendered inside a SearchContextProvider.
+ * This provider ensures collection indexing is computed once and shared
+ * with all AddComponentWidget instances, avoiding O(n*m) complexity.
+ */
+export const CollectionIndexProvider = ({ children }: CollectionIndexProviderProps) => {
+  const { hits } = useSearchContext();
+  const collectionIndexData = useCollectionIndexing(hits);
+
+  return (
+    <CollectionIndexContext.Provider value={collectionIndexData}>
+      {children}
+    </CollectionIndexContext.Provider>
+  );
+};
+
+/**
+ * Hook to access pre-computed collection indexing data.
+ * Must be used within a CollectionIndexProvider.
+ * @returns CollectionIndexData with pre-computed maps
+ */
+export const useCollectionIndexContext = (): CollectionIndexData => {
+  const ctx = useContext(CollectionIndexContext);
+  if (ctx === undefined) {
+    throw new Error('useCollectionIndexContext must be used within a CollectionIndexProvider');
+  }
+  return ctx;
+};
+
 /**
  * React component to provide `ComponentPickerContext`
  */

src/library-authoring/components/AddComponentWidget.tsx

@@ -8,11 +8,10 @@ import {
   CheckBoxOutlineBlank,
 } from '@openedx/paragon/icons';
 
-import { useSearchContext } from '../../search-manager';
 import {
   SelectedComponent,
   useComponentPickerContext,
-  useCollectionIndexing,
+  useCollectionIndexContext,
 } from '../common/context/ComponentPickerContext';
 
 import messages from './messages';
@@ -38,13 +37,12 @@ const AddComponentWidget = ({
     selectedCollections,
   } = useComponentPickerContext();
 
-  const { hits } = useSearchContext();
   const {
     collectionToComponents,
     componentToCollections,
     collectionToAffectedSizes,
     collectionSizes,
-  } = useCollectionIndexing(hits);
+  } = useCollectionIndexContext();
 
   const collectionData = useMemo(() => {
     if (isCollection) {