diff --git a/app/assets/javascripts/admin/spree/base.js.erb b/app/assets/javascripts/admin/spree/base.js.erb
index 8a2015d786..99aada8cb5 100644
--- a/app/assets/javascripts/admin/spree/base.js.erb
+++ b/app/assets/javascripts/admin/spree/base.js.erb
@@ -32,9 +32,6 @@ jQuery(function($) {
     });
   }
 
-  // Make flash messages dissapear
-  setTimeout('$(".flash").fadeOut()', 5000);
-
   // Highlight hovered table column
   $('table tbody tr td.actions a').hover(function(){
     var tr = $(this).closest('tr');
diff --git a/app/views/admin/shared/_flashes.html.haml b/app/views/admin/shared/_flashes.html.haml
index 57673b3f48..1683d5a1d8 100644
--- a/app/views/admin/shared/_flashes.html.haml
+++ b/app/views/admin/shared/_flashes.html.haml
@@ -1,6 +1,6 @@
 #flashes
   - if defined? flashes
     - flashes.each do |type, msg|
-      .animate-show{"data-controller": "flash"}
+      .animate-show{"data-controller": "flash", "data-flash-auto-close-value": "true"}
         .flash{type: "#{type}", class: "#{type}"}
           %span= msg
diff --git a/app/webpacker/controllers/flash_controller.js b/app/webpacker/controllers/flash_controller.js
index c30c08bcab..100d34fa69 100644
--- a/app/webpacker/controllers/flash_controller.js
+++ b/app/webpacker/controllers/flash_controller.js
@@ -5,7 +5,24 @@ document.addEventListener("turbolinks:before-cache", () =>
 );
 
 export default class extends Controller {
+  static values = {
+    autoClose: Boolean,
+  };
+
+  connect() {
+    if (this.autoCloseValue) {
+      setTimeout(this.close.bind(this), 5000);
+    }
+  }
+
   close() {
+    // Fade out
+    this.element.classList.remove("animate-show");
+    this.element.classList.add("animate-hide-500");
+    setTimeout(this.remove.bind(this), 500);
+  }
+
+  remove() {
     this.element.remove();
   }
 }
diff --git a/app/webpacker/css/admin/animations.scss b/app/webpacker/css/admin/animations.scss
index 7b6e451078..6dffab1cfe 100644
--- a/app/webpacker/css/admin/animations.scss
+++ b/app/webpacker/css/admin/animations.scss
@@ -11,13 +11,23 @@
 }
 
 @keyframes fade-out-hide {
-  0%   {opacity: 1; visibility: visible;}
-  99%  {opacity: 0; visibility: visible;}
-  100% {opacity: 0; visibility: hidden;}
+  0% {
+    opacity: 1;
+    visibility: visible;
+  }
+  99% {
+    opacity: 0;
+    visibility: visible;
+  }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
 }
 
 .animate-hide-500 {
   animation: fade-out-hide 0.5s;
+  opacity: 0; // Stay invisible after animation
 }
 
 // @-webkit-keyframes slideOutDown
diff --git a/spec/javascripts/stimulus/flash_controller_test.js b/spec/javascripts/stimulus/flash_controller_test.js
new file mode 100644
index 0000000000..665c07aa47
--- /dev/null
+++ b/spec/javascripts/stimulus/flash_controller_test.js
@@ -0,0 +1,34 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import flash_controller from "../../../app/webpacker/controllers/flash_controller";
+
+describe("FlashController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("flash", flash_controller);
+  });
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div id="element" data-controller='flash' data-flash-auto-close-value='true'></div>
+    `;
+
+  });
+
+  describe("autoClose", () => {
+    jest.useFakeTimers();
+
+    it("is cleared after about 5 seconds", () => {
+      let element = document.getElementById("element");
+      expect(element).not.toBe(null);
+
+      jest.advanceTimersByTime(5500);
+
+      element = document.getElementById("element");
+      expect(element).toBe(null);
+    });
+  });
+});