diff --git a/web/src/components/dashboards/perses/PersesWrapper.tsx b/web/src/components/dashboards/perses/PersesWrapper.tsx
index 6d3e1cece..a14a4a436 100644
--- a/web/src/components/dashboards/perses/PersesWrapper.tsx
+++ b/web/src/components/dashboards/perses/PersesWrapper.tsx
@@ -356,13 +356,9 @@ export function PersesWrapper({ children, project }: PersesWrapperProps) {
           content=""
         >
           <PluginRegistry pluginLoader={pluginLoader}>
-            {!project ? (
-              <>{children}</>
-            ) : (
-              <InnerWrapper project={project} dashboardName={dashboardName}>
-                {children}
-              </InnerWrapper>
-            )}
+            <InnerWrapper project={project} dashboardName={dashboardName}>
+              {children}
+            </InnerWrapper>
           </PluginRegistry>
         </SnackbarProvider>
       </ChartsProvider>
@@ -379,6 +375,31 @@ function InnerWrapper({ children, project, dashboardName }) {
   const DEFAULT_DASHBOARD_DURATION = '30m';
   const DEFAULT_REFRESH_INTERVAL = '0s';
 
+  // Always have a dashboard resource to prevent context issues
+  const effectiveDashboard: DashboardResource = React.useMemo(() => {
+    if (persesDashboard) {
+      return persesDashboard;
+    }
+    // Create a temporary dashboard when the real one isn't available
+    return {
+      kind: 'Dashboard' as const,
+      metadata: {
+        name: 'loading',
+        project: null,
+        version: 0,
+      },
+      spec: {
+        display: { name: 'Loading...' },
+        datasources: {},
+        panels: {},
+        layouts: [],
+        variables: [],
+        duration: '1h',
+        refreshInterval: '30s',
+      },
+    };
+  }, [persesDashboard]);
+
   const dashboardDuration = persesDashboard?.spec?.duration;
   const dashboardTimeInterval = persesDashboard?.spec?.refreshInterval;
 
@@ -423,10 +444,6 @@ function InnerWrapper({ children, project, dashboardName }) {
     return result;
   }, [data, project, dashboardName]);
 
-  if (persesDashboardLoading) {
-    return <LoadingBox />;
-  }
-
   return (
     <TimeRangeProviderWithQueryParams
       initialTimeRange={initialTimeRange}
@@ -434,21 +451,20 @@ function InnerWrapper({ children, project, dashboardName }) {
     >
       <VariableProviderWithQueryParams
         builtinVariableDefinitions={builtinVariables}
-        initialVariableDefinitions={persesDashboard?.spec?.variables}
-        key={persesDashboard?.metadata.name}
+        initialVariableDefinitions={effectiveDashboard?.spec?.variables}
+        key={effectiveDashboard.metadata.name}
       >
-        <PersesPrometheusDatasourceWrapper queries={[]} dashboardResource={persesDashboard}>
-          {persesDashboard ? (
-            <DashboardProvider
-              initialState={{
-                dashboardResource: persesDashboard,
-              }}
-            >
-              <ValidationProvider>{children}</ValidationProvider>
-            </DashboardProvider>
-          ) : (
-            <>{children}</>
-          )}
+        <PersesPrometheusDatasourceWrapper queries={[]} dashboardResource={effectiveDashboard}>
+          <DashboardProvider
+            initialState={{
+              dashboardResource: effectiveDashboard,
+            }}
+            key={effectiveDashboard.metadata.name}
+          >
+            <ValidationProvider>
+              {persesDashboardLoading ? <LoadingBox /> : children}
+            </ValidationProvider>
+          </DashboardProvider>
         </PersesPrometheusDatasourceWrapper>
       </VariableProviderWithQueryParams>
     </TimeRangeProviderWithQueryParams>
diff --git a/web/src/components/dashboards/perses/dashboard-page.tsx b/web/src/components/dashboards/perses/dashboard-page.tsx
index e8709896d..25f38de0b 100644
--- a/web/src/components/dashboards/perses/dashboard-page.tsx
+++ b/web/src/components/dashboards/perses/dashboard-page.tsx
@@ -9,6 +9,15 @@ import { OCPDashboardApp } from './dashboard-app';
 import { DashboardFrame } from './dashboard-frame';
 import { ProjectEmptyState } from './emptystates/ProjectEmptyState';
 import { useDashboardsData } from './hooks/useDashboardsData';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  Spinner,
+} from '@patternfly/react-core';
+import { SearchIcon } from '@patternfly/react-icons';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -19,6 +28,39 @@ const queryClient = new QueryClient({
   },
 });
 
+export const EmptyStateSpinner: React.FunctionComponent = () => (
+  <Bullseye>
+    <EmptyState>
+      <EmptyStateHeader
+        titleText="Loading"
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={Spinner} />}
+      />
+    </EmptyState>
+  </Bullseye>
+);
+
+interface EmptyStateNoMatchFoundProps {
+  headerMsg: string;
+  bodyMsg: string;
+}
+
+export const EmptyStateNoMatchFound: React.FunctionComponent<EmptyStateNoMatchFoundProps> = ({
+  headerMsg,
+  bodyMsg,
+}) => (
+  <Bullseye>
+    <EmptyState>
+      <EmptyStateHeader
+        titleText={headerMsg}
+        headingLevel="h4"
+        icon={<EmptyStateIcon icon={SearchIcon} />}
+      />
+      <EmptyStateBody>{bodyMsg}</EmptyStateBody>
+    </EmptyState>
+  </Bullseye>
+);
+
 const DashboardPage_: React.FC = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
   const location = useLocation();
@@ -65,17 +107,16 @@ const DashboardPage_: React.FC = () => {
   );
 
   if (!currentDashboard) {
-    return (
-      <div style={{ padding: '2rem' }}>
-        <h2>{t('Dashboard not found')}</h2>
-        <p>
-          {t('The dashboard "{{name}}" was not found in project "{{project}}".', {
-            name: targetDashboardName,
-            project: activeProject || urlProject,
-          })}
-        </p>
-      </div>
-    );
+    const headerMsg = t('Dashboard not found');
+    const bodyMsg = t('The dashboard "{{name}}" was not found in project "{{project}}".', {
+      name: targetDashboardName,
+      project: activeProject || urlProject,
+    });
+    return <EmptyStateNoMatchFound headerMsg={headerMsg} bodyMsg={bodyMsg} />;
+  }
+
+  if (!currentDashboard.persesDashboard) {
+    return <EmptyStateSpinner />;
   }
 
   return (