From 2bba38134ebb7db39ada495d15fa2698289c45bc Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 25 Jan 2023 15:33:17 +1100
Subject: [PATCH] Show new flash messages until discarded by user

We currently have two mechanisms to display flash messages. The old one
through AngularJS and the new one with StimulusReflex.

The AngularJS directive showed flashes for 10 seconds. The
StimulusReflex controller showed them only for 3 seconds. But any time
based disappearance of error messages is problematic. There's important
information in there and some error messages can be long. It's also
possible that a request takes a while, the user leaves the computer and
comes back later. If we hide the flash automatically then the user may
have no idea what went wrong. They may even think that everything is
fine and their order went through.

I removed the time-based removal of flash messages from the new
StimulusReflex controller to address this problem. But I didn't touch
the AngularJS directive because it will be removed anyway. There may
also be many more messages that could be annoying if they didn't
disappear, for example a simple "login successful".

I personally think that flash messages that are not important to keep,
don't need to be shown in the first place. The best UX makes the success
obvious on the page. And success should be assumed.
---
 app/webpacker/controllers/flash_controller.js |  9 ---------
 app/webpacker/css/darkswarm/animations.scss   | 11 -----------
 2 files changed, 20 deletions(-)

diff --git a/app/webpacker/controllers/flash_controller.js b/app/webpacker/controllers/flash_controller.js
index 1b17498c46..c30c08bcab 100644
--- a/app/webpacker/controllers/flash_controller.js
+++ b/app/webpacker/controllers/flash_controller.js
@@ -5,15 +5,6 @@ document.addEventListener("turbolinks:before-cache", () =>
 );
 
 export default class extends Controller {
-  connect() {
-    setTimeout(this.fadeout.bind(this), 3000);
-  }
-
-  fadeout() {
-    this.element.classList.add("animate-hide-500");
-    setTimeout(this.close.bind(this), 500);
-  }
-
   close() {
     this.element.remove();
   }
diff --git a/app/webpacker/css/darkswarm/animations.scss b/app/webpacker/css/darkswarm/animations.scss
index 406cca504d..9fdb17eec7 100644
--- a/app/webpacker/css/darkswarm/animations.scss
+++ b/app/webpacker/css/darkswarm/animations.scss
@@ -4,17 +4,6 @@
 
 // ANIMATION FUNCTIONS
 
-@keyframes fade-out-hide {
-  0%   {opacity: 1; visibility: visible;}
-  99%  {opacity: 0; visibility: visible;}
-  100% {opacity: 0; visibility: hidden;}
-}
-
-.animate-hide-500 {
-  animation: fade-out-hide 0.5s;
-}
-
-//
 @-webkit-keyframes slideInDown {
   0% {
     opacity: 0;