diff --git a/frontend/src/framework/ModuleContext.ts b/frontend/src/framework/ModuleContext.ts
index ef519a82d..6bc70e309 100644
--- a/frontend/src/framework/ModuleContext.ts
+++ b/frontend/src/framework/ModuleContext.ts
@@ -2,6 +2,7 @@ import React from "react";
 
 import { BroadcastChannel } from "./Broadcaster";
 import { ModuleInstance } from "./ModuleInstance";
+import { ModuleInstanceStatusController } from "./ModuleInstanceStatusController";
 import { StateBaseType, StateStore, useSetStoreValue, useStoreState, useStoreValue } from "./StateStore";
 import { SyncSettingKey } from "./SyncSettings";
 
@@ -56,4 +57,8 @@ export class ModuleContext<S extends StateBaseType> {
     setInstanceTitle(title: string): void {
         this._moduleInstance.setTitle(title);
     }
+
+    getStatusController(): ModuleInstanceStatusController {
+        return this._moduleInstance.getStatusController();
+    }
 }
diff --git a/frontend/src/framework/ModuleInstance.ts b/frontend/src/framework/ModuleInstance.ts
index 79a154263..d94dd1d65 100644
--- a/frontend/src/framework/ModuleInstance.ts
+++ b/frontend/src/framework/ModuleInstance.ts
@@ -9,6 +9,7 @@ import { ModuleContext } from "./ModuleContext";
 import { StateBaseType, StateOptions, StateStore } from "./StateStore";
 import { SyncSettingKey } from "./SyncSettings";
 import { Workbench } from "./Workbench";
+import { ModuleInstanceStatusControllerInternal } from "./internal/ModuleInstanceStatusControllerInternal";
 
 export enum ModuleInstanceState {
     INITIALIZING,
@@ -35,6 +36,7 @@ export class ModuleInstance<StateType extends StateBaseType> {
     private _cachedDefaultState: StateType | null;
     private _cachedStateStoreOptions?: StateOptions<StateType>;
     private _initialSettings: InitialSettings | null;
+    private _statusController: ModuleInstanceStatusControllerInternal;
 
     constructor(
         module: Module<StateType>,
@@ -57,6 +59,7 @@ export class ModuleInstance<StateType extends StateBaseType> {
         this._fatalError = null;
         this._cachedDefaultState = null;
         this._initialSettings = null;
+        this._statusController = new ModuleInstanceStatusControllerInternal();
 
         this._broadcastChannels = {} as Record<string, BroadcastChannel>;
 
@@ -178,6 +181,10 @@ export class ModuleInstance<StateType extends StateBaseType> {
         return this._module;
     }
 
+    getStatusController(): ModuleInstanceStatusControllerInternal {
+        return this._statusController;
+    }
+
     subscribeToImportStateChange(cb: () => void): () => void {
         this._importStateSubscribers.add(cb);
         return () => {
diff --git a/frontend/src/framework/ModuleInstanceStatusController.ts b/frontend/src/framework/ModuleInstanceStatusController.ts
new file mode 100644
index 000000000..e63d1f2bc
--- /dev/null
+++ b/frontend/src/framework/ModuleInstanceStatusController.ts
@@ -0,0 +1,20 @@
+export enum StatusMessageType {
+    Warning = "warning",
+    Error = "error",
+}
+
+export enum StatusSource {
+    View = "view",
+    Settings = "settings",
+}
+
+export interface ModuleInstanceStatusController {
+    addMessage(source: StatusSource, message: string, type: StatusMessageType): void;
+    clearMessages(source: StatusSource): void;
+    setLoading(isLoading: boolean): void;
+
+    setDebugMessage(source: StatusSource, message: string): void;
+    incrementReportedComponentRenderCount(source: StatusSource): void;
+
+    reviseAndPublishState(): void;
+}
diff --git a/frontend/src/framework/StatusWriter.ts b/frontend/src/framework/StatusWriter.ts
new file mode 100644
index 000000000..a71aa4266
--- /dev/null
+++ b/frontend/src/framework/StatusWriter.ts
@@ -0,0 +1,78 @@
+import React from "react";
+
+import { ModuleContext } from "./ModuleContext";
+import { ModuleInstanceStatusController, StatusMessageType, StatusSource } from "./ModuleInstanceStatusController";
+
+export class ViewStatusWriter {
+    private _statusController: ModuleInstanceStatusController;
+
+    constructor(statusController: ModuleInstanceStatusController) {
+        this._statusController = statusController;
+    }
+
+    setLoading(isLoading: boolean): void {
+        this._statusController.setLoading(isLoading);
+    }
+
+    addError(message: string): void {
+        this._statusController.addMessage(StatusSource.View, message, StatusMessageType.Error);
+    }
+
+    addWarning(message: string): void {
+        this._statusController.addMessage(StatusSource.View, message, StatusMessageType.Warning);
+    }
+
+    setDebugMessage(message: string): void {
+        this._statusController.setDebugMessage(StatusSource.View, message);
+    }
+}
+
+export class SettingsStatusWriter {
+    private _statusController: ModuleInstanceStatusController;
+
+    constructor(statusController: ModuleInstanceStatusController) {
+        this._statusController = statusController;
+    }
+
+    addError(message: string): void {
+        this._statusController.addMessage(StatusSource.Settings, message, StatusMessageType.Error);
+    }
+
+    addWarning(message: string): void {
+        this._statusController.addMessage(StatusSource.Settings, message, StatusMessageType.Warning);
+    }
+
+    setDebugMessage(message: string): void {
+        this._statusController.setDebugMessage(StatusSource.Settings, message);
+    }
+}
+
+export function useViewStatusWriter(moduleContext: ModuleContext<any>): ViewStatusWriter {
+    const statusController = moduleContext.getStatusController();
+
+    const statusWriter = React.useRef<ViewStatusWriter>(new ViewStatusWriter(statusController));
+
+    statusController.clearMessages(StatusSource.View);
+    statusController.incrementReportedComponentRenderCount(StatusSource.View);
+
+    React.useEffect(function handleRender() {
+        statusController.reviseAndPublishState();
+    });
+
+    return statusWriter.current;
+}
+
+export function useSettingsStatusWriter(moduleContext: ModuleContext<any>): ViewStatusWriter {
+    const statusController = moduleContext.getStatusController();
+
+    const statusWriter = React.useRef<ViewStatusWriter>(new ViewStatusWriter(statusController));
+
+    statusController.clearMessages(StatusSource.Settings);
+    statusController.incrementReportedComponentRenderCount(StatusSource.Settings);
+
+    React.useEffect(function handleRender() {
+        statusController.reviseAndPublishState();
+    });
+
+    return statusWriter.current;
+}
diff --git a/frontend/src/framework/internal/ModuleInstanceStatusControllerInternal.ts b/frontend/src/framework/internal/ModuleInstanceStatusControllerInternal.ts
new file mode 100644
index 000000000..bc3c01de0
--- /dev/null
+++ b/frontend/src/framework/internal/ModuleInstanceStatusControllerInternal.ts
@@ -0,0 +1,139 @@
+import React from "react";
+
+import {
+    ModuleInstanceStatusController,
+    StatusMessageType,
+    StatusSource,
+} from "@framework/ModuleInstanceStatusController";
+
+import { cloneDeep, filter, isEqual, keys } from "lodash";
+
+type StatusMessage = {
+    source: StatusSource;
+    message: string;
+    type: StatusMessageType;
+};
+
+type StatusControllerState = {
+    messages: StatusMessage[];
+    loading: boolean;
+    viewDebugMessage: string;
+    settingsDebugMessage: string;
+    viewRenderCount: number | null;
+    settingsRenderCount: number | null;
+};
+
+export class ModuleInstanceStatusControllerInternal implements ModuleInstanceStatusController {
+    protected _stateCandidates: StatusControllerState;
+    protected _state: StatusControllerState = {
+        messages: [],
+        loading: false,
+        viewDebugMessage: "",
+        settingsDebugMessage: "",
+        viewRenderCount: null,
+        settingsRenderCount: null,
+    };
+    private _subscribers: Map<keyof StatusControllerState, Set<() => void>> = new Map();
+
+    constructor() {
+        this._stateCandidates = cloneDeep(this._state);
+    }
+
+    addMessage(source: StatusSource, message: string, type: StatusMessageType): void {
+        this._stateCandidates.messages.push({
+            source,
+            message,
+            type,
+        });
+    }
+
+    clearMessages(source: StatusSource): void {
+        this._stateCandidates.messages = this._stateCandidates.messages.filter((msg) => msg.source !== source);
+    }
+
+    setLoading(isLoading: boolean): void {
+        this._stateCandidates.loading = isLoading;
+    }
+
+    setDebugMessage(source: StatusSource, message: string): void {
+        if (source === StatusSource.View) {
+            this._stateCandidates.viewDebugMessage = message;
+        }
+        if (source === StatusSource.Settings) {
+            this._stateCandidates.settingsDebugMessage = message;
+        }
+    }
+
+    incrementReportedComponentRenderCount(source: StatusSource): void {
+        if (source === StatusSource.View) {
+            if (this._stateCandidates.viewRenderCount === null) {
+                this._stateCandidates.viewRenderCount = 0;
+            }
+            this._stateCandidates.viewRenderCount++;
+        }
+        if (source === StatusSource.Settings) {
+            if (this._stateCandidates.settingsRenderCount === null) {
+                this._stateCandidates.settingsRenderCount = 0;
+            }
+            this._stateCandidates.settingsRenderCount++;
+        }
+    }
+
+    reviseAndPublishState(): void {
+        const differentStateKeys = filter(keys(this._stateCandidates), (key: keyof StatusControllerState) => {
+            return !isEqual(this._state[key], this._stateCandidates[key]);
+        }) as (keyof StatusControllerState)[];
+
+        this._state = cloneDeep(this._stateCandidates);
+
+        differentStateKeys.forEach((stateKey) => {
+            this.notifySubscribers(stateKey);
+        });
+    }
+
+    private notifySubscribers(stateKey: keyof StatusControllerState): void {
+        const subscribers = this._subscribers.get(stateKey);
+        if (subscribers) {
+            subscribers.forEach((subscriber) => {
+                subscriber();
+            });
+        }
+    }
+
+    makeSnapshotGetter<T extends keyof StatusControllerState>(stateKey: T): () => StatusControllerState[T] {
+        const snapshotGetter = (): any => {
+            return this._state[stateKey];
+        };
+
+        return snapshotGetter;
+    }
+
+    makeSubscriberFunction<T extends keyof StatusControllerState>(
+        stateKey: T
+    ): (onStoreChangeCallback: () => void) => () => void {
+        // Using arrow function in order to keep "this" in context
+        const subscriber = (onStoreChangeCallback: () => void): (() => void) => {
+            const subscribers = this._subscribers.get(stateKey) || new Set();
+            subscribers.add(onStoreChangeCallback);
+            this._subscribers.set(stateKey, subscribers);
+
+            return () => {
+                subscribers.delete(onStoreChangeCallback);
+            };
+        };
+
+        return subscriber;
+    }
+}
+
+export function useStatusControllerStateValue<T extends keyof StatusControllerState>(
+    statusController: ModuleInstanceStatusControllerInternal,
+    stateKey: T
+): StatusControllerState[T] {
+    const value = React.useSyncExternalStore<StatusControllerState[T]>(
+        statusController.makeSubscriberFunction(stateKey),
+        statusController.makeSnapshotGetter(stateKey)
+    );
+
+    return value;
+}
diff --git a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx
index eb0f42009..4c4960f2a 100644
--- a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx
+++ b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/header.tsx
@@ -1,9 +1,16 @@
 import React from "react";
+import ReactDOM from "react-dom";
 
 import { ModuleInstance } from "@framework/ModuleInstance";
+import { StatusMessageType } from "@framework/ModuleInstanceStatusController";
 import { SyncSettingKey, SyncSettingsMeta } from "@framework/SyncSettings";
+import { useStatusControllerStateValue } from "@framework/internal/ModuleInstanceStatusControllerInternal";
+import { Badge } from "@lib/components/Badge";
+import { CircularProgress } from "@lib/components/CircularProgress";
+import { useElementBoundingRect } from "@lib/hooks/useElementBoundingRect";
 import { isDevMode } from "@lib/utils/devMode";
-import { Close } from "@mui/icons-material";
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+import { Close, Error, Warning } from "@mui/icons-material";
 
 export type HeaderProps = {
     moduleInstance: ModuleInstance<any>;
@@ -17,39 +24,145 @@ export const Header: React.FC<HeaderProps> = (props) => {
         props.moduleInstance.getSyncedSettingKeys()
     );
     const [title, setTitle] = React.useState<string>(props.moduleInstance.getTitle());
+    const isLoading = useStatusControllerStateValue(props.moduleInstance.getStatusController(), "loading");
+    const statusMessages = useStatusControllerStateValue(props.moduleInstance.getStatusController(), "messages");
+    const [statusMessagesVisible, setStatusMessagesVisible] = React.useState<boolean>(false);
 
-    React.useEffect(() => {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const boundingRect = useElementBoundingRect(ref);
+
+    React.useEffect(function handleMount() {
         function handleSyncedSettingsChange(newSyncedSettings: SyncSettingKey[]) {
             setSyncedSettings([...newSyncedSettings]);
         }
 
-        const unsubscribeFunc = props.moduleInstance.subscribeToSyncedSettingKeysChange(handleSyncedSettingsChange);
-
-        return unsubscribeFunc;
-    }, []);
-
-    React.useEffect(() => {
         function handleTitleChange(newTitle: string) {
             setTitle(newTitle);
         }
 
-        const unsubscribeFunc = props.moduleInstance.subscribeToTitleChange(handleTitleChange);
+        const unsubscribeFromSyncSettingsChange =
+            props.moduleInstance.subscribeToSyncedSettingKeysChange(handleSyncedSettingsChange);
+        const unsubscribeFromTitleChange = props.moduleInstance.subscribeToTitleChange(handleTitleChange);
 
-        return unsubscribeFunc;
+        return function handleUnmount() {
+            unsubscribeFromSyncSettingsChange();
+            unsubscribeFromTitleChange();
+        };
     }, []);
 
+    function handlePointerDown(e: React.PointerEvent<HTMLDivElement>) {
+        props.onPointerDown(e);
+        setStatusMessagesVisible(false);
+    }
+
     function handlePointerUp(e: React.PointerEvent<HTMLDivElement>) {
         e.stopPropagation();
     }
 
+    function handleStatusPointerDown(e: React.PointerEvent<HTMLDivElement>) {
+        setStatusMessagesVisible(!statusMessagesVisible);
+        e.stopPropagation();
+    }
+
+    function makeStatusIndicator(): React.ReactNode {
+        const stateIndicators: React.ReactNode[] = [];
+
+        if (isLoading) {
+            stateIndicators.push(
+                <div
+                    key="header-loading"
+                    className="flex items-center justify-center h-full p-1 cursor-help"
+                    title="This module is currently loading new content."
+                >
+                    <CircularProgress size="medium-small" />
+                </div>
+            );
+        }
+        const numErrors = statusMessages.filter((message) => message.type === StatusMessageType.Error).length;
+        const numWarnings = statusMessages.filter((message) => message.type === StatusMessageType.Warning).length;
+
+        if (numErrors > 0 || numWarnings > 0) {
+            stateIndicators.push(
+                <div
+                    key="header-status-messages"
+                    className={resolveClassNames(
+                        "flex items-center justify-center cursor-pointer h-full p-1 hover:bg-blue-100",
+                        { "bg-blue-300 hover:bg-blue-400": statusMessagesVisible }
+                    )}
+                    onPointerDown={handleStatusPointerDown}
+                >
+                    <Badge badgeContent={numErrors + numWarnings} className="flex">
+                        <Error
+                            fontSize="medium"
+                            color="error"
+                            style={{ display: numErrors === 0 ? "none" : "block" }}
+                        />
+                        <div className="overflow-hidden h-full">
+                            <Warning
+                                fontSize="medium"
+                                color="warning"
+                                style={{ display: numWarnings === 0 ? "none" : "block" }}
+                                className={resolveClassNames({
+                                    "-ml-3": numErrors > 0,
+                                })}
+                            />
+                        </div>
+                    </Badge>
+                </div>
+            );
+        }
+
+        if (stateIndicators.length === 0) return null;
+
+        return (
+            <div className="h-full flex items-center justify-center">
+                <span className="bg-slate-300 w-[1px] h-3/4 mr-2" />
+                {stateIndicators}
+                <span className="bg-slate-300 w-[1px] h-3/4 ml-2" />
+            </div>
+        );
+    }
+
+    function makeStatusMessages(): React.ReactNode {
+        return (
+            <div className="flex flex-col p-2 gap-2">
+                {statusMessages.map((entry, i) => (
+                    <div key={`${entry.message}-${i}`} className="flex items-center gap-2">
+                        {entry.type === StatusMessageType.Error && <Error fontSize="small" color="error" />}
+                        {entry.type === StatusMessageType.Warning && <Warning fontSize="small" color="warning" />}
+                        <span
+                            className="ml-2 overflow-hidden text-ellipsis min-w-0 whitespace-nowrap"
+                            title={entry.message}
+                        >
+                            {entry.message}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        );
+    }
+
+    const hasErrors = statusMessages.some((entry) => entry.type === StatusMessageType.Error);
+
     return (
         <div
-            className={`bg-slate-100 p-2 pl-4 pr-4 flex items-center select-none shadow ${
-                props.isDragged ? "cursor-grabbing" : "cursor-move"
-            }`}
-            onPointerDown={props.onPointerDown}
+            className={resolveClassNames("flex items-center select-none shadow relative", {
+                "cursor-grabbing": props.isDragged,
+                "cursor-move": !props.isDragged,
+                "bg-red-100": hasErrors,
+                "bg-slate-100": !hasErrors,
+            })}
+            onPointerDown={handlePointerDown}
+            ref={ref}
         >
-            <div className="flex-grow flex items-center text-sm font-bold min-w-0">
+            <div
+                className={resolveClassNames("absolute -bottom-0.5 left-0 w-full overflow-hidden", {
+                    hidden: !isLoading,
+                })}
+            >
+                <div className="bg-blue-600 animate-linear-indefinite h-0.5 w-full rounded" />
+            </div>
+            <div className="flex-grow flex items-center text-sm font-bold min-w-0 p-2">
                 <span title={title} className="flex-grow text-ellipsis whitespace-nowrap overflow-hidden min-w-0">
                     {title}
                 </span>
@@ -73,15 +186,29 @@ export const Header: React.FC<HeaderProps> = (props) => {
                     ))}
                 </>
             </div>
-
+            {makeStatusIndicator()}
             <div
-                className="hover:text-slate-500 cursor-pointer"
+                className="hover:text-slate-500 cursor-pointer p-2"
                 onPointerDown={props.onRemoveClick}
                 onPointerUp={handlePointerUp}
                 title="Remove this module"
             >
                 <Close className="w-4 h-4" />
             </div>
+            {statusMessagesVisible &&
+                ReactDOM.createPortal(
+                    <div
+                        className={"absolute shadow min-w-[200px] z-40 bg-white overflow-hidden"}
+                        style={{
+                            top: boundingRect.bottom,
+                            right: window.innerWidth - boundingRect.right,
+                            maxWidth: boundingRect.width,
+                        }}
+                    >
+                        {makeStatusMessages()}
+                    </div>,
+                    document.body
+                )}
         </div>
     );
 };
diff --git a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/viewContent.tsx b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/viewContent.tsx
index f082fe1cb..2d4e2fce5 100644
--- a/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/viewContent.tsx
+++ b/frontend/src/framework/internal/components/Content/private-components/ViewWrapper/private-components/viewContent.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { ImportState } from "@framework/Module";
 import { ModuleInstance, ModuleInstanceState } from "@framework/ModuleInstance";
+import { StatusSource } from "@framework/ModuleInstanceStatusController";
 import { Workbench } from "@framework/Workbench";
 import { DebugProfiler } from "@framework/internal/components/DebugProfiler";
 import { ErrorBoundary } from "@framework/internal/components/ErrorBoundary";
@@ -20,39 +21,40 @@ export const ViewContent = React.memo((props: ViewContentProps) => {
         ModuleInstanceState.INITIALIZING
     );
 
-    React.useEffect(() => {
+    React.useEffect(function handleMount() {
+        setModuleInstanceState(props.moduleInstance.getModuleInstanceState());
         setImportState(props.moduleInstance.getImportState());
 
         function handleModuleInstanceImportStateChange() {
             setImportState(props.moduleInstance.getImportState());
         }
 
-        const unsubscribeFunc = props.moduleInstance.subscribeToImportStateChange(
-            handleModuleInstanceImportStateChange
-        );
-
-        return unsubscribeFunc;
-    }, []);
-
-    React.useEffect(() => {
-        setModuleInstanceState(props.moduleInstance.getModuleInstanceState());
-
         function handleModuleInstanceStateChange() {
             setModuleInstanceState(props.moduleInstance.getModuleInstanceState());
         }
 
-        const unsubscribeFunc = props.moduleInstance.subscribeToModuleInstanceStateChange(
+        const unsubscribeFromImportStateChange = props.moduleInstance.subscribeToImportStateChange(
+            handleModuleInstanceImportStateChange
+        );
+
+        const unsubscribeFromModuleInstanceStateChange = props.moduleInstance.subscribeToModuleInstanceStateChange(
             handleModuleInstanceStateChange
         );
 
-        return unsubscribeFunc;
+        return function handleUnmount() {
+            unsubscribeFromImportStateChange();
+            unsubscribeFromModuleInstanceStateChange();
+        };
     }, []);
 
-    const handleModuleInstanceReload = React.useCallback(() => {
-        props.moduleInstance.reset().then(() => {
-            setModuleInstanceState(props.moduleInstance.getModuleInstanceState());
-        });
-    }, [props.moduleInstance]);
+    const handleModuleInstanceReload = React.useCallback(
+        function handleModuleInstanceReload() {
+            props.moduleInstance.reset().then(() => {
+                setModuleInstanceState(props.moduleInstance.getModuleInstanceState());
+            });
+        },
+        [props.moduleInstance]
+    );
 
     if (importState === ImportState.NotImported) {
         return <div className="h-full w-full flex justify-center items-center">Not imported</div>;
@@ -114,8 +116,12 @@ export const ViewContent = React.memo((props: ViewContentProps) => {
     const View = props.moduleInstance.getViewFC();
     return (
         <ErrorBoundary moduleInstance={props.moduleInstance}>
-            <div className="p-4 h-full w-full">
-                <DebugProfiler id={`${props.moduleInstance.getId()}-view`}>
+            <div className="p-2 h-full w-full">
+                <DebugProfiler
+                    id={`${props.moduleInstance.getId()}-view`}
+                    statusController={props.moduleInstance.getStatusController()}
+                    source={StatusSource.View}
+                >
                     <View
                         moduleContext={props.moduleInstance.getContext()}
                         workbenchSession={props.workbench.getWorkbenchSession()}
diff --git a/frontend/src/framework/internal/components/DebugProfiler/debugProfiler.tsx b/frontend/src/framework/internal/components/DebugProfiler/debugProfiler.tsx
index 3a17ab602..9d8b373c9 100644
--- a/frontend/src/framework/internal/components/DebugProfiler/debugProfiler.tsx
+++ b/frontend/src/framework/internal/components/DebugProfiler/debugProfiler.tsx
@@ -1,5 +1,10 @@
 import React from "react";
 
+import { StatusSource } from "@framework/ModuleInstanceStatusController";
+import {
+    ModuleInstanceStatusControllerInternal,
+    useStatusControllerStateValue,
+} from "@framework/internal/ModuleInstanceStatusControllerInternal";
 import { isDevMode } from "@lib/utils/devMode";
 
 type DebugProfilerRenderInfoProps = {
@@ -36,6 +41,8 @@ DebugProfilerWrapper.displayName = "DebugProfilerWrapper";
 export type DebugProfilerProps = {
     id: string;
     children: React.ReactNode;
+    statusController: ModuleInstanceStatusControllerInternal;
+    source: StatusSource;
 };
 
 type RenderInfo = {
@@ -54,6 +61,14 @@ type RenderInfo = {
 
 export const DebugProfiler: React.FC<DebugProfilerProps> = (props) => {
     const [renderInfo, setRenderInfo] = React.useState<RenderInfo | null>(null);
+    const reportedRenderCount = useStatusControllerStateValue(
+        props.statusController,
+        props.source === StatusSource.View ? "viewRenderCount" : "settingsRenderCount"
+    );
+    const customDebugMessage = useStatusControllerStateValue(
+        props.statusController,
+        props.source === StatusSource.View ? "viewDebugMessage" : "settingsDebugMessage"
+    );
 
     const handleRender = React.useCallback(
         (
@@ -91,8 +106,18 @@ export const DebugProfiler: React.FC<DebugProfilerProps> = (props) => {
                 <div className="absolute bottom-1 w-full flex gap-2 flex-wrap">
                     {renderInfo && (
                         <>
-                            <DebugProfilerRenderInfo title="Render count">
-                                RC: {renderInfo.renderCount}
+                            {reportedRenderCount !== null && (
+                                <DebugProfilerRenderInfo title="Reported component render count">
+                                    Component RC: {reportedRenderCount}
+                                </DebugProfilerRenderInfo>
+                            )}
+                            {customDebugMessage && (
+                                <DebugProfilerRenderInfo title="Custom debug message">
+                                    Message: {customDebugMessage}
+                                </DebugProfilerRenderInfo>
+                            )}
+                            <DebugProfilerRenderInfo title="Tree render count">
+                                Tree RC: {renderInfo.renderCount}
                             </DebugProfilerRenderInfo>
                             <DebugProfilerRenderInfo title="Phase">P: {renderInfo.phase}</DebugProfilerRenderInfo>
                             <DebugProfilerRenderInfo
diff --git a/frontend/src/framework/internal/components/Settings/private-components/setting.tsx b/frontend/src/framework/internal/components/Settings/private-components/setting.tsx
index 2edf6e0a4..d4dcca263 100644
--- a/frontend/src/framework/internal/components/Settings/private-components/setting.tsx
+++ b/frontend/src/framework/internal/components/Settings/private-components/setting.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 import { ImportState } from "@framework/Module";
 import { ModuleInstance, ModuleInstanceState } from "@framework/ModuleInstance";
+import { StatusSource } from "@framework/ModuleInstanceStatusController";
 import { Workbench } from "@framework/Workbench";
 import { ErrorBoundary } from "@framework/internal/components/ErrorBoundary";
 import { useImportState } from "@framework/internal/hooks/moduleHooks";
@@ -91,7 +92,11 @@ export const Setting: React.FC<SettingProps> = (props) => {
                 </div>
                 <div className="flex flex-col gap-4 overflow-auto">
                     <div className="p-2">
-                        <DebugProfiler id={`${props.moduleInstance.getId()}-settings`}>
+                        <DebugProfiler
+                            id={`${props.moduleInstance.getId()}-settings`}
+                            source={StatusSource.Settings}
+                            statusController={props.moduleInstance.getStatusController()}
+                        >
                             <Settings
                                 moduleContext={props.moduleInstance.getContext()}
                                 workbenchSession={props.workbench.getWorkbenchSession()}
diff --git a/frontend/src/modules/SimulationTimeSeriesMatrix/view.tsx b/frontend/src/modules/SimulationTimeSeriesMatrix/view.tsx
index 8ef285fa2..62f421ad8 100644
--- a/frontend/src/modules/SimulationTimeSeriesMatrix/view.tsx
+++ b/frontend/src/modules/SimulationTimeSeriesMatrix/view.tsx
@@ -4,9 +4,11 @@ import Plot from "react-plotly.js";
 import { Ensemble } from "@framework/Ensemble";
 import { EnsembleIdent } from "@framework/EnsembleIdent";
 import { ModuleFCProps } from "@framework/Module";
+import { useViewStatusWriter } from "@framework/StatusWriter";
 import { useEnsembleSet } from "@framework/WorkbenchSession";
 import { useElementSize } from "@lib/hooks/useElementSize";
 import { ColorScaleGradientType } from "@lib/utils/ColorScale";
+import { ContentError } from "@modules/_shared/components/ContentMessage";
 
 import { useHistoricalVectorDataQueries, useStatisticalVectorDataQueries, useVectorDataQueries } from "./queryHooks";
 import { GroupBy, State, VisualizationMode } from "./state";
@@ -24,6 +26,8 @@ export const view = ({ moduleContext, workbenchSession, workbenchSettings }: Mod
 
     const ensembleSet = useEnsembleSet(workbenchSession);
 
+    const statusWriter = useViewStatusWriter(moduleContext);
+
     // Store values
     const vectorSpecifications = moduleContext.useStoreValue("vectorSpecifications");
     const groupBy = moduleContext.useStoreValue("groupBy");
@@ -64,13 +68,20 @@ export const view = ({ moduleContext, workbenchSession, workbenchSettings }: Mod
         vectorSpecificationsWithHistoricalData?.some((vec) => vec.hasHistoricalVector) ?? false
     );
 
-    const hasQueryError = [
-        ...vectorDataQueries.filter((query) => query.isError),
-        ...vectorStatisticsQueries.filter((query) => query.isError),
-        ...historicalVectorDataQueries.filter((query) => query.isError),
-    ];
-    if (hasQueryError.length > 0) {
-        return <div>One or more query has error state</div>;
+    const isQueryFetching =
+        vectorDataQueries.some((query) => query.isFetching) ||
+        vectorStatisticsQueries.some((query) => query.isFetching) ||
+        historicalVectorDataQueries.some((query) => query.isFetching);
+
+    statusWriter.setLoading(isQueryFetching);
+
+    const hasQueryError =
+        vectorDataQueries.some((query) => query.isError) ||
+        vectorStatisticsQueries.some((query) => query.isError) ||
+        historicalVectorDataQueries.some((query) => query.isError);
+    if (hasQueryError) {
+        statusWriter.addError("One or more queries have an error state.");
+        return <ContentError>One or more queries have an error state.</ContentError>;
     }
 
     // Map vector specifications and queries with data
diff --git a/frontend/src/modules/_shared/components/ContentMessage/contentMessage.tsx b/frontend/src/modules/_shared/components/ContentMessage/contentMessage.tsx
new file mode 100644
index 000000000..5c7682caa
--- /dev/null
+++ b/frontend/src/modules/_shared/components/ContentMessage/contentMessage.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+
+import { resolveClassNames } from "@lib/utils/resolveClassNames";
+
+export enum ContentMessageType {
+    INFO = "info",
+    ERROR = "error",
+}
+
+export type ContentMessageProps = {
+    type: ContentMessageType;
+    children: React.ReactNode;
+};
+
+export const ContentMessage: React.FC<ContentMessageProps> = (props) => {
+    return (
+        <div
+            className={resolveClassNames("w-full h-full flex items-center justify-center", {
+                "text-red-700": props.type === "error",
+            })}
+        >
+            {props.children}
+        </div>
+    );
+};
+
+ContentMessage.displayName = "ContentMessage";
+
+export type ContentErrorProps = {
+    children: React.ReactNode;
+};
+
+export const ContentError: React.FC<ContentErrorProps> = (props) => {
+    return <ContentMessage type={ContentMessageType.ERROR}>{props.children}</ContentMessage>;
+};
+
+ContentError.displayName = "ContentError";
+
+export type ContentInfoProps = {
+    children: React.ReactNode;
+};
+
+export const ContentInfo: React.FC<ContentInfoProps> = (props) => {
+    return <ContentMessage type={ContentMessageType.INFO}>{props.children}</ContentMessage>;
+};
+
+ContentInfo.displayName = "ContentInfo";
diff --git a/frontend/src/modules/_shared/components/ContentMessage/index.ts b/frontend/src/modules/_shared/components/ContentMessage/index.ts
new file mode 100644
index 000000000..496fdc502
--- /dev/null
+++ b/frontend/src/modules/_shared/components/ContentMessage/index.ts
@@ -0,0 +1 @@
+export { ContentInfo, ContentError } from "./contentMessage";
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index a1b7b10d6..0ac9a9567 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -2,6 +2,19 @@
 module.exports = {
     content: ["./src/**/*.{html,ts,tsx}"],
     darkMode: "class",
-    theme: {},
+    theme: {
+        extend: {
+            keyframes: {
+                "linear-indefinite": {
+                    "0%": { transform: "translateX(-100%) scaleX(1)" },
+                    "50%": { transform: "translateX(0%) scaleX(0.25)" },
+                    "100%": { transform: "translateX(100%)" },
+                },
+            },
+            animation: {
+                "linear-indefinite": "linear-indefinite 3s cubic-bezier(1, 0.1, 0.1, 1) infinite",
+            },
+        }
+    },
     plugins: [],
 };