refactor: rename SearchSourceLoadingResults to SearchSourceResultsLoadingIndicator

Author: MartinCupela

src/components/Chat/Chat.tsx

@@ -35,13 +35,13 @@ export type ChatPropsForwardedToComponentContext<
   | 'SearchBar'
   | 'SearchResults'
   | 'SearchResultsHeader'
-  | 'SearchSourceResultsEmpty'
-  | 'SearchSourceResultsHeader'
-  | 'SearchSourceLoadingResults'
+  | 'SearchResultsPresearch'
   | 'SearchSourceResultList'
   | 'SearchSourceResultListFooter'
   | 'SearchSourceResults'
-  | 'SearchResultsPresearch'
+  | 'SearchSourceResultsEmpty'
+  | 'SearchSourceResultsHeader'
+  | 'SearchSourceResultsLoadingIndicator'
 >;
 
 export type ChatProps<
@@ -195,12 +195,12 @@ export const Chat = <
       SearchResults: props.SearchResults,
       SearchResultsHeader: props.SearchResultsHeader,
       SearchResultsPresearch: props.SearchResultsPresearch,
-      SearchSourceLoadingResults: props.SearchSourceLoadingResults,
       SearchSourceResultList: props.SearchSourceResultList,
       SearchSourceResultListFooter: props.SearchSourceResultListFooter,
       SearchSourceResults: props.SearchSourceResults,
       SearchSourceResultsEmpty: props.SearchSourceResultsEmpty,
       SearchSourceResultsHeader: props.SearchSourceResultsHeader,
+      SearchSourceResultsLoadingIndicator: props.SearchSourceResultsLoadingIndicator,
       SendButton: props.SendButton,
       StartRecordingAudioButton: props.StartRecordingAudioButton,
       ThreadHead: props.ThreadHead,
@@ -264,12 +264,12 @@ export const Chat = <
       props.SearchResults,
       props.SearchResultsHeader,
       props.SearchResultsPresearch,
-      props.SearchSourceLoadingResults,
       props.SearchSourceResultList,
       props.SearchSourceResultListFooter,
       props.SearchSourceResults,
       props.SearchSourceResultsEmpty,
       props.SearchSourceResultsHeader,
+      props.SearchSourceResultsLoadingIndicator,
       props.SendButton,
       props.StartRecordingAudioButton,
       props.ThreadHead,

src/context/ComponentContext.tsx

@@ -183,8 +183,6 @@ export type ComponentContextValue<
   SearchResultsPresearch?: React.ComponentType<
     SearchResultsPresearchProps<StreamChatGenerics, SearchSources>
   >;
-  /** Custom component to display the search source results UI during the search query execution, defaults to and accepts same props as: [SearchSourceLoadingResults](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceLoadingResults.tsx) */
-  SearchSourceLoadingResults?: React.ComponentType;
   /** Custom component to display the search source items results, defaults to and accepts same props as: [SearchSourceResultList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultList.tsx) */
   SearchSourceResultList?: React.ComponentType<
     SearchSourceResultListProps<StreamChatGenerics, SearchSources>
@@ -197,6 +195,8 @@ export type ComponentContextValue<
   SearchSourceResultsEmpty?: React.ComponentType;
   /** Custom component to display the header content for a given search source results, no default component is provided. */
   SearchSourceResultsHeader?: React.ComponentType;
+  /** Custom component to display the search source results UI during the search query execution, defaults to and accepts same props as: [SearchSourceResultsLoadingIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx) */
+  SearchSourceResultsLoadingIndicator?: React.ComponentType;
   /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
   SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;
   /** Custom UI component button for initiating audio recording, defaults to and accepts same props as: [StartRecordingAudioButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecordingButtons.tsx) */

src/experimental/Search/SearchResults/SearchSourceResultListFooter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { DefaultSearchSources, SearchSource, SearchSourceState } from '../SearchController';
-import { SearchSourceLoadingResults as DefaultSearchSourceLoadingResults } from './SearchSourceLoadingResults';
+import { SearchSourceResultsLoadingIndicator as DefaultSearchSourceResultsLoadingIndicator } from './SearchSourceResultsLoadingIndicator';
 import { useSearchSourceResultsContext } from '../SearchSourceResultsContext';
 import { useComponentContext, useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
@@ -16,18 +16,16 @@ export const SearchSourceResultListFooter = <
   SearchSources extends SearchSource[] = DefaultSearchSources<StreamChatGenerics>
 >() => {
   const { t } = useTranslationContext();
-  const { SearchSourceLoadingResults = DefaultSearchSourceLoadingResults } = useComponentContext<
-    StreamChatGenerics,
-    NonNullable<unknown>,
-    SearchSources
-  >();
+  const {
+    SearchSourceResultsLoadingIndicator = DefaultSearchSourceResultsLoadingIndicator,
+  } = useComponentContext<StreamChatGenerics, NonNullable<unknown>, SearchSources>();
   const { searchSource } = useSearchSourceResultsContext();
   const { hasMore, isLoading } = useStateStore(searchSource.state, searchSourceStateSelector);
 
   return (
     <div className='str-chat__search-source-result-list__footer'>
       {isLoading ? (
-        <SearchSourceLoadingResults />
+        <SearchSourceResultsLoadingIndicator />
       ) : !hasMore ? (
         <div className='str-chat__search-source-results---empty'>
           {t<string>('All results loaded')}

…chResults/SearchSourceLoadingResults.tsx …/SearchSourceResultsLoadingIndicator.tsxsrc/experimental/Search/SearchResults/SearchSourceLoadingResults.tsx renamed to src/experimental/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx src/experimental/Search/SearchResults/SearchSourceLoadingResults.tsx renamed to src/experimental/Search/SearchResults/SearchSourceResultsLoadingIndicator.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { useTranslationContext } from '../../../context';
 import { useSearchSourceResultsContext } from '../SearchSourceResultsContext';
 
-export const SearchSourceLoadingResults = () => {
+export const SearchSourceResultsLoadingIndicator = () => {
   const { t } = useTranslationContext();
   const { searchSource } = useSearchSourceResultsContext();
   return (
     <div
-      className='str-chat__channel-search-container-searching'
-      data-testid='search-in-progress-indicator'
+      className='str-chat__search-source-results__loading-indicator'
+      data-testid='search-loading-indicator'
     >
       {t<string>(`Searching for ${searchSource.type}...`)}
     </div>

src/experimental/Search/SearchResults/index.ts

@@ -3,7 +3,7 @@ export * from './SearchResults';
 export * from './SearchResultsHeader';
 export * from './SearchResultsPresearch';
 export * from './SearchSourceResultsEmpty';
-export * from './SearchSourceLoadingResults';
+export * from './SearchSourceResultsLoadingIndicator';
 export * from './SearchSourceResultList';
 export * from './SearchSourceResultListFooter';
 export * from './SearchSourceResults';