Animate closing of processes

src/js/services/ui/actions.js

@@ -277,6 +277,13 @@ export function processCancelled(key){
     }
 }
 
+export function processFinishing(key){
+    return { 
+        type: 'PROCESS_FINISHING',
+        key: key
+    }
+}
+
 export function processFinished(key){
     return { 
         type: 'PROCESS_FINISHED',

src/js/services/ui/middleware.js

@@ -158,12 +158,26 @@ const UIMiddleware = (function(){
                 next(action)
                 break
 
+            case 'PROCESS_FINISHING':
+
+                // start a timeout to remove this notification
+                // This gives us time to animate out the notification before we remove the data
+                var timeout = setTimeout(
+                    function(){
+                        store.dispatch(uiActions.processFinished(action.key))
+                    },
+                    200
+                )
+
+                next(action);
+                break;
+
             case 'PROCESS_FINISHED':
                 store.dispatch({
                     type: action.key+'_FINISHED'
-                })
-                next(action)
-                break
+                });
+                next(action);
+                break;
 
             // This action is irrelevant to us, pass it on to the next middleware
             default:

src/js/services/ui/reducer.js

@@ -170,10 +170,17 @@ export default function reducer(ui = {}, action){
             }
             return Object.assign({}, ui, {processes: processes})
 
+         case 'PROCESS_FINISHING':
+            var processes = Object.assign({}, (ui.processes ? ui.processes : {}))
+            if (processes[action.key]){
+                processes[action.key] = Object.assign({}, processes[action.key], {closing: true})
+            }
+            return Object.assign({}, ui, {processes: processes})
+
          case 'PROCESS_FINISHED':
             var processes = Object.assign({}, (ui.processes ? ui.processes : {}))
             if (processes[action.key]){
-                processes[action.key] = Object.assign({}, processes[action.key], {status: 'finished'})
+                processes[action.key] = Object.assign({}, processes[action.key], {status: 'finished', closing: false})
             }
             return Object.assign({}, ui, {processes: processes})