diff --git a/src/pages/component-details/providers/DynamicData/provider.tsx b/src/pages/component-details/providers/DynamicData/provider.tsx
index 4288b34c..3906095b 100644
--- a/src/pages/component-details/providers/DynamicData/provider.tsx
+++ b/src/pages/component-details/providers/DynamicData/provider.tsx
@@ -41,9 +41,10 @@ export const DynamicDataContextProvider: React.FC = ({ children }) => {
     labelSelector: `${CODEBASE_BRANCH_LABEL_SELECTOR_CODEBASE_NAME}=${name}`,
   });
 
-  const sortedCodebaseBranches = codebaseBranches?.sort((a) =>
-    isDefaultBranch(component, a) ? -1 : 1
-  );
+  const sortedCodebaseBranches =
+    component === null
+      ? null
+      : codebaseBranches?.sort((a) => (isDefaultBranch(component, a) ? -1 : 1));
 
   const DataContextValue = React.useMemo(
     () => ({
diff --git a/src/pages/configuration/pages/pipeline-details/view.tsx b/src/pages/configuration/pages/pipeline-details/view.tsx
index a3320906..e8eee9ed 100644
--- a/src/pages/configuration/pages/pipeline-details/view.tsx
+++ b/src/pages/configuration/pages/pipeline-details/view.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { ErrorContent } from '../../../../components/ErrorContent';
 import { LoadingWrapper } from '../../../../components/LoadingWrapper';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import { Section } from '../../../../components/Section';
@@ -18,6 +19,18 @@ export const PageView = () => {
 
   const { activeTab, handleChangeTab } = useTabsContext();
 
+  const renderPageContent = React.useCallback(() => {
+    if (error) {
+      return <ErrorContent error={error} />;
+    }
+
+    return (
+      <LoadingWrapper isLoading={item === null}>
+        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
+      </LoadingWrapper>
+    );
+  }, [activeTab, error, handleChangeTab, item, tabs]);
+
   return (
     <PageWrapper
       containerMaxWidth={'xl'}
@@ -33,11 +46,7 @@ export const PageView = () => {
         },
       ]}
     >
-      <Section title={name}>
-        <LoadingWrapper isLoading={item === null && !error}>
-          <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
-        </LoadingWrapper>
-      </Section>
+      <Section title={name}>{renderPageContent()}</Section>
     </PageWrapper>
   );
 };
diff --git a/src/pages/configuration/pages/task-details/view.tsx b/src/pages/configuration/pages/task-details/view.tsx
index 6dca376e..dcee6a2a 100644
--- a/src/pages/configuration/pages/task-details/view.tsx
+++ b/src/pages/configuration/pages/task-details/view.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
+import { ErrorContent } from '../../../../components/ErrorContent';
 import { LoadingWrapper } from '../../../../components/LoadingWrapper';
 import { PageWrapper } from '../../../../components/PageWrapper';
 import { Section } from '../../../../components/Section';
@@ -17,6 +18,18 @@ export const PageView = () => {
   const tabs = useTabs({ task: item });
   const { activeTab, handleChangeTab } = useTabsContext();
 
+  const renderPageContent = React.useCallback(() => {
+    if (error) {
+      return <ErrorContent error={error} />;
+    }
+
+    return (
+      <LoadingWrapper isLoading={item === null}>
+        <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
+      </LoadingWrapper>
+    );
+  }, [activeTab, error, handleChangeTab, item, tabs]);
+
   return (
     <PageWrapper
       containerMaxWidth={'xl'}
@@ -32,11 +45,7 @@ export const PageView = () => {
         },
       ]}
     >
-      <Section title={name}>
-        <LoadingWrapper isLoading={item === null && !error}>
-          <Tabs tabs={tabs} activeTabIdx={activeTab} handleChangeTab={handleChangeTab} />
-        </LoadingWrapper>
-      </Section>
+      <Section title={name}>{renderPageContent()}</Section>
     </PageWrapper>
   );
 };