feat(search): update 'loading...' condition

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.test.tsx

@@ -13,6 +13,10 @@ import { MockStoreEnhanced } from 'redux-mock-store';
 import { HISTAMINE_MAP_ID, MAIN_MAP_ID, PRKN_SUBSTRATES_MAP_ID } from '@/constants/mocks';
 import { DEFAULT_ERROR } from '@/constants/errors';
 import { modelElementFixture } from '@/models/fixtures/modelElementFixture';
+import {
+  HIGHLIGHT_REACTIONS_INITIAL_STATE_MOCK,
+  REACTIONS_STATE_INITIAL_MOCK,
+} from '@/redux/reactions/reactions.mock';
 import { BioEntitiesAccordion } from './BioEntitiesAccordion.component';
 
 const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
@@ -121,6 +125,10 @@ describe('BioEntitiesAccordion - component', () => {
           error: DEFAULT_ERROR,
         },
       },
+      reactions: {
+        ...REACTIONS_STATE_INITIAL_MOCK,
+        highlight: { ...HIGHLIGHT_REACTIONS_INITIAL_STATE_MOCK, loading: 'succeeded' },
+      },
       models: {
         data: MODELS_MOCK,
         loading: 'succeeded',

src/components/Map/Drawer/SearchDrawerWrapper/GroupedSearchResults/BioEntitiesAccordion/BioEntitiesAccordion.component.tsx

@@ -10,10 +10,13 @@ import {
 } from '@/shared/Accordion';
 import {
   numberOfSearchModelElementsSelector,
-  searchModelElementsLoadingStatusSelector,
+  searchModelElementsLoadingSelector,
   searchModelElementsPerModelSelector,
 } from '@/redux/modelElements/modelElements.selector';
-import { highlightReactionsPerModelSelector } from '@/redux/reactions/reactions.selector';
+import {
+  highlightReactionsLoadingSelector,
+  highlightReactionsPerModelSelector,
+} from '@/redux/reactions/reactions.selector';
 import { ONE, ZERO } from '@/constants/common';
 import { NewReaction } from '@/types/models';
 import { BioEntitiesSubmapItem } from './BioEntitiesSubmapItem';
@@ -21,7 +24,8 @@ import { BioEntitiesSubmapItem } from './BioEntitiesSubmapItem';
 export const BioEntitiesAccordion = (): JSX.Element => {
   const dispatch = useAppDispatch();
   const searchModelElementsNumber = useAppSelector(numberOfSearchModelElementsSelector);
-  const searchModelElementsLoadingStatus = useAppSelector(searchModelElementsLoadingStatusSelector);
+  const searchModelElementsLoadingStatus = useAppSelector(searchModelElementsLoadingSelector);
+  const highlightReactionsLoadingStatus = useAppSelector(highlightReactionsLoadingSelector);
   const searchModelElementsPerModel = useAppSelector(searchModelElementsPerModelSelector);
   const isContentTabOpened = useAppSelector(bioEntityIsContentTabOpenedSelector);
   const reactionsPerModel = useAppSelector(highlightReactionsPerModelSelector);
@@ -66,8 +70,13 @@ export const BioEntitiesAccordion = (): JSX.Element => {
     <AccordionItem dangerouslySetExpanded={isContentTabOpened}>
       <AccordionItemHeading>
         <AccordionItemButton onClick={toggleTabOpened}>
-          Content {searchModelElementsLoadingStatus === 'pending' && ' (Loading...)'}
-          {searchModelElementsLoadingStatus === 'succeeded' && ` (${searchModelElementsNumber})`}
+          Content{' '}
+          {[searchModelElementsLoadingStatus, highlightReactionsLoadingStatus].includes(
+            'pending',
+          ) && ' (Loading...)'}
+          {searchModelElementsLoadingStatus === 'succeeded' &&
+            highlightReactionsLoadingStatus === 'succeeded' &&
+            ` (${searchModelElementsNumber})`}
         </AccordionItemButton>
       </AccordionItemHeading>
       <AccordionItemPanel>

src/redux/bioEntity/thunks/getMultiBioEntity.ts

@@ -5,9 +5,14 @@ import { createAsyncThunk } from '@reduxjs/toolkit';
 import { getError } from '@/utils/error-report/getError';
 import { selectTab } from '@/redux/drawer/drawer.slice';
 import getModelElementsIdsFromReaction from '@/components/Map/MapViewer/utils/listeners/mouseClick/getModelElementsIdsFromReaction';
-import { setHighlightReactionsByIds } from '@/redux/reactions/reactions.slice';
+import {
+  resetHighlightReactionsData,
+  setHighlightReactionsByIds,
+  setLoadingHighlightReactionsData,
+} from '@/redux/reactions/reactions.slice';
 import {
   clearSearchModelElements,
+  setLoadingSearchModelElements,
   setModelElementSearchByIds,
 } from '@/redux/modelElements/modelElements.slice';
 import getModelElementsElementIdsFromReaction from '@/redux/bioEntity/thunks/utils/getModelElementsElementIdsFromReaction';
@@ -23,6 +28,9 @@ export const getMultiBioEntity = createAsyncThunk<null, GetMultiBioEntityProps,
   async ({ searchQueries, isPerfectMatch }, { dispatch }) => {
     try {
       dispatch(clearSearchModelElements());
+      dispatch(setLoadingHighlightReactionsData());
+      dispatch(resetHighlightReactionsData());
+      dispatch(setLoadingSearchModelElements());
       const asyncGetBioEntityFunctions = searchQueries.map(searchQuery =>
         dispatch(
           getBioEntity({ searchQuery, isPerfectMatch, addNumbersToEntityNumber: false }),

src/redux/modelElements/modelElements.reducers.ts

@@ -87,6 +87,7 @@ export const setModelElementSearchByIdsReducer = (
       error: DEFAULT_ERROR,
       searchQueryElement: searchQuery,
     });
+    state.search.loading = 'succeeded';
   }
 };
 
@@ -114,3 +115,7 @@ export const clearSearchModelElementsReducer = (state: ModelElementsState): void
   state.search.data = [];
   state.search.loading = 'idle';
 };
+
+export const setLoadingSearchModelElementsReducer = (state: ModelElementsState): void => {
+  state.search.loading = 'pending';
+};

src/redux/modelElements/modelElements.slice.ts

@@ -5,6 +5,7 @@ import {
   setModelElementSearchReducer,
   setMultipleModelElementSearchReducer,
   setModelElementSearchByIdsReducer,
+  setLoadingSearchModelElementsReducer,
 } from '@/redux/modelElements/modelElements.reducers';
 import { MODEL_ELEMENTS_INITIAL_STATE_MOCK } from '@/redux/modelElements/modelElements.mock';
 
@@ -16,6 +17,7 @@ export const modelElements = createSlice({
     setMultipleModelElementSearch: setMultipleModelElementSearchReducer,
     clearSearchModelElements: clearSearchModelElementsReducer,
     setModelElementSearchByIds: setModelElementSearchByIdsReducer,
+    setLoadingSearchModelElements: setLoadingSearchModelElementsReducer,
   },
   extraReducers: builder => {
     getModelElementsReducer(builder);
@@ -27,6 +29,7 @@ export const {
   setMultipleModelElementSearch,
   clearSearchModelElements,
   setModelElementSearchByIds,
+  setLoadingSearchModelElements,
 } = modelElements.actions;
 
 export default modelElements.reducer;

src/redux/reactions/reactions.reducers.ts

@@ -43,6 +43,10 @@ export const resetHighlightReactionsDataReducer = (state: ReactionsState): void
   state.highlight.loading = REACTIONS_INITIAL_STATE.highlight.loading;
 };
 
+export const setLoadingHighlightReactionsDataReducer = (state: ReactionsState): void => {
+  state.highlight.loading = 'pending';
+};
+
 export const setHighlightReactionsReducer = (
   state: ReactionsState,
   action: PayloadAction<Array<NewReaction>>,
@@ -93,4 +97,5 @@ export const setHighlightReactionsByIdsReducer = (
       searchQueryElement: searchQuery,
     });
   }
+  state.highlight.loading = 'succeeded';
 };

src/redux/reactions/reactions.selector.ts

@@ -129,3 +129,8 @@ export const highlightReactionsPerModelSelector = createSelector(
     );
   },
 );
+
+export const highlightReactionsLoadingSelector = createSelector(
+  reactionsSelector,
+  reactions => reactions.highlight.loading,
+);

src/redux/reactions/reactions.slice.ts

@@ -5,6 +5,7 @@ import {
   resetHighlightReactionsDataReducer,
   setHighlightReactionsByIdsReducer,
   setHighlightReactionsReducer,
+  setLoadingHighlightReactionsDataReducer,
 } from './reactions.reducers';
 
 export const reactionsSlice = createSlice({
@@ -14,13 +15,18 @@ export const reactionsSlice = createSlice({
     resetHighlightReactionsData: resetHighlightReactionsDataReducer,
     setHighlightReactions: setHighlightReactionsReducer,
     setHighlightReactionsByIds: setHighlightReactionsByIdsReducer,
+    setLoadingHighlightReactionsData: setLoadingHighlightReactionsDataReducer,
   },
   extraReducers: builder => {
     getReactionsForModelReducer(builder);
   },
 });
 
-export const { resetHighlightReactionsData, setHighlightReactions, setHighlightReactionsByIds } =
-  reactionsSlice.actions;
+export const {
+  resetHighlightReactionsData,
+  setHighlightReactions,
+  setHighlightReactionsByIds,
+  setLoadingHighlightReactionsData,
+} = reactionsSlice.actions;
 
 export default reactionsSlice.reducer;