diff --git a/frontend/webEditor/src/loadingIndicator/loadingIndicator.css b/frontend/webEditor/src/loadingIndicator/loadingIndicator.css
index 068ef24c..3acbddf3 100644
--- a/frontend/webEditor/src/loadingIndicator/loadingIndicator.css
+++ b/frontend/webEditor/src/loadingIndicator/loadingIndicator.css
@@ -17,6 +17,21 @@
     color: white;
 
     background-color: rgba(0, 0, 0, 0.8);
+
+    opacity: 0;
+    display: none;
+}
+
+#loading-indicator-wrapper.show {
+    display: flex;
+    animation: show 0s forwards;
+    animation-delay: 0.2s;
+}
+
+@keyframes show {
+    to {
+        opacity: 1;
+    }
 }
 
 #turning-circle {
diff --git a/frontend/webEditor/src/loadingIndicator/loadingIndicator.ts b/frontend/webEditor/src/loadingIndicator/loadingIndicator.ts
index eb8d3b8d..a674b4b0 100644
--- a/frontend/webEditor/src/loadingIndicator/loadingIndicator.ts
+++ b/frontend/webEditor/src/loadingIndicator/loadingIndicator.ts
@@ -5,7 +5,7 @@ export class LoadingIndicator extends AbstractUIExtension {
     static readonly ID = "loading-indicator";
     private loadingIndicatorWrapper: HTMLElement | undefined;
     private loadingIndicatorText: HTMLElement | undefined;
-    private waitTimeout?: number;
+    private static VISIBLE_CLASS = "show";
 
     id(): string {
         return LoadingIndicator.ID;
@@ -16,7 +16,6 @@ export class LoadingIndicator extends AbstractUIExtension {
     protected initializeContents(containerElement: HTMLElement): void {
         this.loadingIndicatorWrapper = document.createElement("div");
         this.loadingIndicatorWrapper.id = "loading-indicator-wrapper";
-        this.loadingIndicatorWrapper.style.display = "none";
 
         const loadingIndicator = document.createElement("div");
         loadingIndicator.id = "turning-circle";
@@ -30,28 +29,18 @@ export class LoadingIndicator extends AbstractUIExtension {
     }
 
     public showIndicator(text?: string) {
-        this.waitTimeout = setTimeout(() => {
-            if (!this.waitTimeout) {
-                return;
-            }
-            if (this.loadingIndicatorWrapper) {
-                this.loadingIndicatorWrapper.style.display = "flex";
-                if (this.loadingIndicatorText) {
-                    this.loadingIndicatorText.innerText = text || "Loading...";
-                }
-                this.loadingIndicatorWrapper.focus();
-                this.waitTimeout = undefined;
+        if (this.loadingIndicatorWrapper) {
+            this.loadingIndicatorWrapper.classList.add(LoadingIndicator.VISIBLE_CLASS);
+            if (this.loadingIndicatorText) {
+                this.loadingIndicatorText.innerText = text || "Loading...";
             }
-        }, 200);
+            this.loadingIndicatorWrapper.focus();
+        }
     }
 
     public hideIndicator() {
-        if (this.waitTimeout) {
-            clearTimeout(this.waitTimeout);
-            this.waitTimeout = undefined;
-        }
         if (this.loadingIndicatorWrapper) {
-            this.loadingIndicatorWrapper.style.display = "none";
+            this.loadingIndicatorWrapper.classList.remove(LoadingIndicator.VISIBLE_CLASS);
         }
     }
 }
diff --git a/frontend/webEditor/src/serialize/loadJson.ts b/frontend/webEditor/src/serialize/loadJson.ts
index a4c9628f..38cdd74c 100644
--- a/frontend/webEditor/src/serialize/loadJson.ts
+++ b/frontend/webEditor/src/serialize/loadJson.ts
@@ -65,7 +65,7 @@ export abstract class LoadJsonCommand extends Command {
 
         this.file = await this.getFile(context).catch(() => undefined);
         if (!this.file) {
-            this.loadingIndicator.hide();
+            this.loadingIndicator.hideIndicator();
             this.actionDispatcher.dispatch(InitializeCanvasBoundsAction.create(this.oldRoot.canvasBounds));
             return this.oldRoot;
         }
@@ -108,13 +108,13 @@ export abstract class LoadJsonCommand extends Command {
             this.oldFileName = this.fileName.getName();
             this.fileName.setName(this.file.fileName);
 
-            this.loadingIndicator.hide();
+            this.loadingIndicator.hideIndicator();
             return this.newRoot;
         } catch (error) {
             this.logger.error(this, "Error loading model", error);
             this.newRoot = this.oldRoot;
             this.actionDispatcher.dispatch(InitializeCanvasBoundsAction.create(this.oldRoot.canvasBounds));
-            this.loadingIndicator.hide();
+            this.loadingIndicator.hideIndicator();
             return this.oldRoot;
         }
     }
@@ -143,7 +143,7 @@ export abstract class LoadJsonCommand extends Command {
 
         this.fileName.setName(this.oldFileName ?? "diagram");
 
-        this.loadingIndicator.hide();
+        this.loadingIndicator.hideIndicator();
         return this.oldRoot ?? context.modelFactory.createRoot(EMPTY_ROOT);
     }
 
@@ -175,7 +175,7 @@ export abstract class LoadJsonCommand extends Command {
 
         this.fileName.setName(this.file?.fileName ?? "diagram");
 
-        this.loadingIndicator.hide();
+        this.loadingIndicator.hideIndicator();
         return this.newRoot ?? this.oldRoot ?? context.modelFactory.createRoot(EMPTY_ROOT);
     }
 
diff --git a/frontend/webEditor/src/serialize/saveFile.ts b/frontend/webEditor/src/serialize/saveFile.ts
index 17a414f4..1de63d97 100644
--- a/frontend/webEditor/src/serialize/saveFile.ts
+++ b/frontend/webEditor/src/serialize/saveFile.ts
@@ -25,7 +25,7 @@ export abstract class SaveFileCommand extends SavedDiagramCreatorCommand {
             this.downloadFile(file);
         }
 
-        this.loadingIndicator.hide();
+        this.loadingIndicator.hideIndicator();
         return context.root;
     }
     undo(context: CommandExecutionContext): CommandReturn {