mlrun · arturrybalskyy-dev · Jun 8, 2026
diff --git a/src/api/monitoringApplications-api.js b/src/api/monitoringApplications-api.js
@@ -20,19 +20,23 @@ such restriction.
 import { mainHttpClient } from '../httpClient'
 
 const monitoringApplications = {
-  getMEPWithDetections: (project, params) =>
+  getMEPWithDetections: (project, params, signal) =>
     mainHttpClient.get(`projects/${project}/model-monitoring/drift-over-time`, {
-      params
+      params,
+      signal
     }),
-  getMonitoringApplication: (project, functionName, params) =>
+  getMonitoringApplication: (project, functionName, params, signal) =>
     mainHttpClient.get(`projects/${project}/model-monitoring/function-summaries/${functionName}`, {
-      params
+      params,
+      signal
     }),
-  getMonitoringApplications: (project, params) =>
+  getMonitoringApplications: (project, params, signal) =>
     mainHttpClient.get(`projects/${project}/model-monitoring/function-summaries`, {
-      params
+      params,
+      signal
     }),
-  getMonitoringApplicationsSummary: project => mainHttpClient.get(`project-summaries/${project}`)
+  getMonitoringApplicationsSummary: (project, signal) =>
+    mainHttpClient.get(`project-summaries/${project}`, { signal })
 }
 
 export default monitoringApplications
diff --git a/src/components/AddToFeatureVectorPage/AddToFeatureVectorPage.jsx b/src/components/AddToFeatureVectorPage/AddToFeatureVectorPage.jsx
@@ -179,6 +179,7 @@ const AddToFeatureVectorPage = () => {
 
   const fetchData = useCallback(
     async filters => {
+      abortControllerRef.current.abort(REQUEST_CANCELED)
       abortControllerRef.current = new AbortController()
 
       const cancelRequestTimeout = setTimeout(() => {

diff --git a/src/components/AddToFeatureVectorPage/AddToFeatureVectorView.jsx b/src/components/AddToFeatureVectorPage/AddToFeatureVectorView.jsx
@@ -76,7 +76,7 @@ const AddToFeatureVectorView = React.forwardRef(
               <AddToFeatureVectorFilters content={content} fetchTags={fetchTags} />
             </ActionBar>
           </div>
-          {(featureStore.loading || featureStore.features.loading) && <Loader />}
+          {(featureStore.loading || featureStore.features.loading) && <Loader overlay />}
           <div className="table-container">
             {featureStore.loading || featureStore.features.loading ? null : content.length === 0 ? (
               <NoData

diff --git a/src/components/Alerts/Alerts.jsx b/src/components/Alerts/Alerts.jsx
@@ -161,7 +161,7 @@ const Alerts = () => {
               <AlertsFilters isAlertsPage isCrossProjects={isCrossProjects} />
             </ActionBar>
           </div>
-          {alertsStore.loading && <Loader />}
+          {alertsStore.loading && <Loader overlay />}
           {alertsStore.loading ? null : (
             <>
               <AlertsTable

diff --git a/src/components/ApplicationMetrics/ApplicationMetrics.jsx b/src/components/ApplicationMetrics/ApplicationMetrics.jsx
@@ -79,7 +79,7 @@ const ApplicationMetrics = () => {
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const params = useParams()
-  const abortControllerRef = useRef()
+  const abortControllerRef = useRef(new AbortController())
 
   const filteredEndpoints = useMemo(() => {
     return modelEndpoints.filter(modelEndpoint => {
@@ -121,6 +121,7 @@ const ApplicationMetrics = () => {
   )
 
   const fetchModelEndpointsData = useCallback(() => {
+    abortControllerRef.current.abort(REQUEST_CANCELED)
     abortControllerRef.current = new AbortController()
 
     dispatch(
@@ -271,7 +272,7 @@ const ApplicationMetrics = () => {
           <div className="list-view">
             {(artifactsStore.modelEndpoints.loading ||
               applicationsStore.loading ||
-              detailsStore.loadingCounter > 0) && <Loader />}
+              detailsStore.loadingCounter > 0) && <Loader overlay />}
             {artifactsStore.modelEndpoints.loading ||
             applicationsStore.loading ? null : modelEndpoints.length === 0 ? (
               <NoData message={requestErrorMessage || 'No model endpoints found'} />

diff --git a/src/components/ApplicationMetrics/ApplicationMetrics.scss b/src/components/ApplicationMetrics/ApplicationMetrics.scss
@@ -23,6 +23,7 @@ $searchHeight: 75px;
   }
 
   .list-view {
+    position: relative;
     display: flex;
     gap: 20px;
     height: calc(100% - 60px);

diff --git a/src/components/Artifacts/Artifacts.jsx b/src/components/Artifacts/Artifacts.jsx
@@ -48,6 +48,7 @@ import { getFeatureVectorData } from '../ModelsPage/Models/models.util'
 import { getFilterTagOptions, setFilters } from '../../reducers/filtersReducer'
 import { getFiltersConfig } from './artifacts.util'
 import { getSavedSearchParams, transformSearchParams } from 'igz-controls/utils/filter.util'
+import { isRequestAborted } from '../../utils/isRequestAborted'
 import { openPopUp, getViewMode } from 'igz-controls/utils/common.util'
 import { setNotification } from 'igz-controls/reducers/notificationReducer'
 import { toggleYaml } from '../../reducers/appReducer'
@@ -136,6 +137,7 @@ const Artifacts = ({
 
   const fetchData = useCallback(
     async filters => {
+      abortControllerRef.current.abort(REQUEST_CANCELED)
       abortControllerRef.current = new AbortController()
 
       const requestParams = {
@@ -201,18 +203,21 @@ const Artifacts = ({
 
           return response
         })
-        .catch(() => {
-          if (isAllVersions) {
-            setArtifactVersions([])
-          } else {
-            setArtifacts([])
+        .catch(error => {
+          if (!isRequestAborted(error?.message)) {
+            if (isAllVersions) {
+              setArtifactVersions([])
+            } else {
+              setArtifacts([])
+            }
           }
         })
     },
     [dispatch, fetchArtifacts, isAllVersions, params.artifactName, params.projectName]
   )
 
   const fetchTags = useCallback(() => {
+    tagAbortControllerRef.current.abort(REQUEST_CANCELED)
     tagAbortControllerRef.current = new AbortController()
 
     return dispatch(

diff --git a/src/components/Artifacts/ArtifactsTable.jsx b/src/components/Artifacts/ArtifactsTable.jsx
@@ -104,7 +104,9 @@ let ArtifactsTable = ({
         </ActionBar>
       </div>
       {renderPageTabs && renderHistoryBackLink()}
-      {artifactsStore.loading ? null : tableContent.length === 0 && isEmpty(selectedArtifact) ? (
+      {artifactsStore.loading ? (
+        <Loader section secondary />
+      ) : tableContent.length === 0 && isEmpty(selectedArtifact) ? (
         <NoData
           message={getNoDataMessage(
             filters,
@@ -117,7 +119,7 @@ let ArtifactsTable = ({
         />
       ) : (
         <>
-          {storeArtifactTypeLoading && <Loader />}
+          {storeArtifactTypeLoading && <Loader overlay />}
           <Table
             actionsMenu={actionsMenu}
             applyDetailsChanges={applyDetailsChanges}

diff --git a/src/components/Artifacts/ArtifactsView.jsx b/src/components/Artifacts/ArtifactsView.jsx
@@ -103,7 +103,6 @@ let ArtifactsView = React.forwardRef(
             <Breadcrumbs />
           </div>
           <div className="content">
-            {artifactsStore.loading && <Loader />}
             <ArtifactsTable
               actionButtons={actionButtons}
               actionsMenu={actionsMenu}

diff --git a/src/components/ArtifactsPreview/ArtifactsPreview.jsx b/src/components/ArtifactsPreview/ArtifactsPreview.jsx
@@ -31,7 +31,7 @@ const ArtifactsPreview = ({ className = '', noData, preview, popupButton }) => {
 
   return !noData && preview.length === 0 ? (
     <div className="loader-container">
-      <Loader />
+      <Loader overlay />
     </div>
   ) : noData ? (
     <NoData />

diff --git a/src/components/ConsumerGroup/ConsumerGroup.jsx b/src/components/ConsumerGroup/ConsumerGroup.jsx
@@ -174,7 +174,7 @@ const ConsumerGroup = () => {
             )}
           />
         )}
-      {(nuclioStore.v3ioStreams.loading || nuclioStore.v3ioStreamShardLags.loading) && <Loader />}
+      {(nuclioStore.v3ioStreams.loading || nuclioStore.v3ioStreamShardLags.loading) && <Loader overlay />}
     </>
   )
 }

diff --git a/src/components/ConsumerGroups/ConsumerGroups.jsx b/src/components/ConsumerGroups/ConsumerGroups.jsx
@@ -113,7 +113,7 @@ const ConsumerGroups = () => {
           )}
         />
       )}
-      {nuclioStore.v3ioStreams.loading && <Loader />}
+      {nuclioStore.v3ioStreams.loading && <Loader overlay />}
     </>
   )
 }

diff --git a/src/components/FeatureSetsPanel/FeatureSetsPanelView.jsx b/src/components/FeatureSetsPanel/FeatureSetsPanelView.jsx
@@ -60,7 +60,7 @@ const FeatureSetsPanelView = ({
   return (
     <div className="new-item-side-panel-container">
       <div className="feature-set-panel new-item-side-panel">
-        {loading && <Loader />}
+        {loading && <Loader overlay />}
         {confirmDialog && (
           <ConfirmDialog
             closePopUp={() => setConfirmDialog(null)}

diff --git a/src/components/FeatureStore/FeatureSets/FeatureSets.jsx b/src/components/FeatureStore/FeatureSets/FeatureSets.jsx
@@ -117,6 +117,7 @@ const FeatureSets = () => {
 
   const fetchData = useCallback(
     filters => {
+      abortControllerRef.current.abort(REQUEST_CANCELED)
       abortControllerRef.current = new AbortController()
 
       const config = {
@@ -145,6 +146,7 @@ const FeatureSets = () => {
   )
 
   const fetchTags = useCallback(() => {
+    tagAbortControllerRef.current.abort(REQUEST_CANCELED)
     tagAbortControllerRef.current = new AbortController()
 
     return dispatch(

diff --git a/src/components/FeatureStore/FeatureSets/FeatureSetsView.jsx b/src/components/FeatureStore/FeatureSets/FeatureSetsView.jsx
@@ -92,7 +92,9 @@ const FeatureSetsView = React.forwardRef(
             <FeatureStoreFilters content={featureSets} />
           </ActionBar>
         </div>
-        {featureStore.loading ? null : featureSets.length === 0 ? (
+        {featureStore.loading ? (
+          <Loader section secondary />
+        ) : featureSets.length === 0 ? (
           <NoData
             message={getNoDataMessage(
               filters,
@@ -106,7 +108,7 @@ const FeatureSetsView = React.forwardRef(
           />
         ) : (
           <>
-            {(selectedRowData.loading || featureStore.featureSets.featureSetLoading) && <Loader />}
+            {(selectedRowData.loading || featureStore.featureSets.featureSetLoading) && <Loader overlay />}
             <Table
               actionsMenu={actionsMenu}
               applyDetailsChanges={applyDetailsChanges}

diff --git a/src/components/FeatureStore/FeatureStore.jsx b/src/components/FeatureStore/FeatureStore.jsx
@@ -22,7 +22,7 @@ import { Outlet } from 'react-router-dom'
 import { useDispatch, useSelector } from 'react-redux'
 
 import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
-import { ConfirmDialog, Loader } from 'igz-controls/components'
+import { ConfirmDialog } from 'igz-controls/components'
 
 import { TABLE_CONTAINER } from '../../constants'
 import { toggleYaml } from '../../reducers/appReducer'
@@ -65,9 +65,6 @@ const FeatureStore = () => {
             >
               <Outlet />
             </FeatureStoreContext.Provider>
-            {(featureStore.loading ||
-              featureStore.entities.loading ||
-              featureStore.features.loading) && <Loader />}
           </div>
         </div>
       </div>

diff --git a/src/components/FeatureStore/FeatureVectors/FeatureVectors.jsx b/src/components/FeatureStore/FeatureVectors/FeatureVectors.jsx
@@ -118,6 +118,7 @@ const FeatureVectors = () => {
 
   const fetchData = useCallback(
     filters => {
+      abortControllerRef.current.abort(REQUEST_CANCELED)
       abortControllerRef.current = new AbortController()
 
       const config = {
@@ -143,6 +144,7 @@ const FeatureVectors = () => {
   )
 
   const fetchTags = useCallback(() => {
+    tagAbortControllerRef.current.abort(REQUEST_CANCELED)
     tagAbortControllerRef.current = new AbortController()
 
     return dispatch(

diff --git a/src/components/FeatureStore/FeatureVectors/FeatureVectorsView.jsx b/src/components/FeatureStore/FeatureVectors/FeatureVectorsView.jsx
@@ -18,6 +18,7 @@ under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
 import React from 'react'
+import { Loader } from 'igz-controls/components'
 import PropTypes from 'prop-types'
 
 import ActionBar from '../../ActionBar/ActionBar'
@@ -86,7 +87,9 @@ const FeatureVectorsView = React.forwardRef(
             <FeatureStoreFilters content={featureVectors} />
           </ActionBar>
         </div>
-        {featureStore.loading ? null : featureVectors.length === 0 ? (
+        {featureStore.loading ? (
+          <Loader section secondary />
+        ) : featureVectors.length === 0 ? (
           <NoData
             message={getNoDataMessage(
               filters,

diff --git a/src/components/FeatureStore/Features/Features.jsx b/src/components/FeatureStore/Features/Features.jsx
@@ -120,6 +120,7 @@ const Features = () => {
 
   const fetchData = useCallback(
     filters => {
+      abortControllerRef.current.abort(REQUEST_CANCELED)
       abortControllerRef.current = new AbortController()
 
       const cancelRequestTimeout = setTimeout(() => {
@@ -163,6 +164,7 @@ const Features = () => {
   )
 
   const fetchTags = useCallback(() => {
+    tagAbortControllerRef.current.abort(REQUEST_CANCELED)
     tagAbortControllerRef.current = new AbortController()
 
     return dispatch(

diff --git a/src/components/FeatureStore/Features/FeaturesView.jsx b/src/components/FeatureStore/Features/FeaturesView.jsx
@@ -26,6 +26,7 @@ import FeatureStorePageTabs from '../FeatureStorePageTabs/FeatureStorePageTabs'
 import FeatureStoreTableRow from '../../../elements/FeatureStoreTableRow/FeatureStoreTableRow'
 import NoData from '../../../common/NoData/NoData'
 import Table from '../../Table/Table'
+import { Loader } from 'igz-controls/components'
 
 import { FEATURE_STORE_PAGE, FEATURES_TAB } from '../../../constants'
 import { PRIMARY_BUTTON } from 'igz-controls/constants'
@@ -81,7 +82,9 @@ const FeaturesView = React.forwardRef(
             <FeatureStoreFilters content={features} />
           </ActionBar>
         </div>
-        {featureStore.features.loading || featureStore.entities.loading ? null : features.length ===
+        {featureStore.features.loading || featureStore.entities.loading ? (
+          <Loader section secondary />
+        ) : features.length ===
           0 ? (
           <NoData
             message={getNoDataMessage(

diff --git a/src/components/FunctionsPage/Functions.jsx b/src/components/FunctionsPage/Functions.jsx
@@ -46,6 +46,7 @@ import {
   generateFunctionsPageData,
   pollDeletingFunctions
 } from './functions.util'
+import { isRequestAborted } from '../../utils/isRequestAborted'
 import {
   ANY_TIME_DATE_OPTION,
   datePickerPastOptions,
@@ -156,6 +157,7 @@ const Functions = ({ isAllVersions = false }) => {
   const fetchData = useCallback(
     filters => {
       terminateDeleteTasksPolling()
+      abortControllerRef.current.abort(REQUEST_CANCELED)
       abortControllerRef.current = new AbortController()
       const requestParams = {
         format: 'minimal',
@@ -237,8 +239,10 @@ const Functions = ({ isAllVersions = false }) => {
             resetFunctions([])
           }
         })
-        .catch(() => {
-          resetFunctions([])
+        .catch(error => {
+          if (!isRequestAborted(error?.message)) {
+            resetFunctions([])
+          }
         })
     },
     [

diff --git a/src/components/FunctionsPage/FunctionsView.jsx b/src/components/FunctionsPage/FunctionsView.jsx
@@ -113,7 +113,7 @@ const FunctionsView = ({
               </ActionBar>
             </div>
             {functionsStore.loading ? (
-              <Loader />
+              <Loader overlay />
             ) : tableContent.length === 0 && isEmpty(selectedFunction) ? (
               <NoData
                 message={getNoDataMessage(
@@ -127,7 +127,7 @@ const FunctionsView = ({
               />
             ) : (
               <>
-                {functionsStore.funcLoading && <Loader />}
+                {functionsStore.funcLoading && <Loader overlay />}
                 <Table
                   actionsMenu={actionsMenu}
                   detailsFormInitialValues={detailsFormInitialValues}

diff --git a/src/components/FunctionsPageOld/FunctionsOld.jsx b/src/components/FunctionsPageOld/FunctionsOld.jsx
@@ -45,6 +45,7 @@ import {
   searchFunctionItem,
   setFullSelectedFunction
 } from './functionsOld.util'
+import { isRequestAborted } from '../../utils/isRequestAborted'
 import {
   datePickerPastOptions,
   getDatePickerFilterValue,
@@ -137,6 +138,7 @@ const Functions = () => {
   const fetchData = useCallback(
     (filters, filtersAreHandled = false) => {
       terminateDeleteTasksPolling()
+      abortControllerRef.current.abort(REQUEST_CANCELED)
       abortControllerRef.current = new AbortController()
       setFunctions([])
 
@@ -201,8 +203,10 @@ const Functions = () => {
             }
           }
         })
-        .catch(() => {
-          setFunctions([])
+        .catch(error => {
+          if (!isRequestAborted(error?.message)) {
+            setFunctions([])
+          }
         })
     },
     [
-Original file line number
+Diff line change
@@ Expand Up / @@ -174,7 +174,7 @@ const ConsumerGroup = () => { @@
                 )}
               />
             )}
-          {(nuclioStore.v3ioStreams.loading || nuclioStore.v3ioStreamShardLags.loading) && <Loader />}
+          {(nuclioStore.v3ioStreams.loading || nuclioStore.v3ioStreamShardLags.loading) && <Loader overlay />}
         </>
       )
     }
@@ Expand Down @@