deleting documents with a delay

frontend/src/Documents/DocumentView.tsx

@@ -47,7 +47,9 @@ export class DocumentViewComponent extends React.PureComponent<
                 </div>
             );
         } else {
-            this.props.fetchDocs();
+            if (!this.props.fetching) {
+                this.props.fetchDocs();
+            }
             return this.props.spinner && <LoadingStub />;
         }
     }

frontend/src/Documents/Overview.tsx

@@ -27,12 +27,6 @@ export class OverviewComponent extends React.PureComponent<
         super(props);
     }
 
-    public componentDidMount() {
-        if (!this.props.allDocs) {
-            this.props.fetchDocs();
-        }
-    }
-
     public render() {
         if (this.props.allDocs) {
             const docs = Object.values(this.props.allDocs);
@@ -53,6 +47,9 @@ export class OverviewComponent extends React.PureComponent<
                 </div>
             );
         } else {
+            if (!this.props.fetching) {
+                this.props.fetchDocs();
+            }
             return this.props.spinner && <LoadingStub />;
         }
     }

frontend/src/Home/Home.tsx

@@ -13,7 +13,7 @@ import {
 import * as React from "react";
 import { connect } from "react-redux";
 import { Route, RouteComponentProps, Switch, withRouter } from "react-router";
-import { Transition } from "react-spring/renderprops";
+import { config, Transition } from "react-spring/renderprops";
 import { Dispatch } from "redux";
 import { IDocumentJSON } from "~../../src/entity/Document";
 import { IUserJSON } from "~../../src/entity/User";
@@ -111,6 +111,11 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                     </Navbar>
                     <div id="MainScreen" className="animationWrapper">
                         <Transition
+                            config={{
+                                ...config.default,
+                                clamp: true,
+                                precision: 0.1,
+                            }}
                             items={location}
                             keys={location.pathname}
                             from={{

frontend/src/redux/docs/reducer.ts

@@ -10,6 +10,8 @@ export interface IDocsState {
     spinner: boolean;
 
     newDocumentID: number | null;
+
+    deletedDocument: IDocumentJSON | null;
 }
 
 const defaultDocsState: IDocsState = {
@@ -18,6 +20,7 @@ const defaultDocsState: IDocsState = {
     error: null,
     spinner: false,
     newDocumentID: null,
+    deletedDocument: null,
 };
 
 export const docsReducer: Reducer<IDocsState, DocsAction> = (
@@ -45,10 +48,20 @@ export const docsReducer: Reducer<IDocsState, DocsAction> = (
         case DocsTypes.DOC_NEW_RESET: {
             return { ...state, newDocumentID: null };
         }
-        case DocsTypes.DOC_DELETE_SUCCESS: {
+        case DocsTypes.DOC_DELETE_START: {
+            const doc = { ...state.all[action.id] };
             const all = { ...state.all };
-            delete all[action.payload.id];
-            return { ...state, all };
+            delete all[action.id];
+            return { ...state, deletedDocument: doc, all };
+        }
+        case DocsTypes.DOC_DELETE_SUCCESS: {
+            return { ...state, deletedDocument: null };
+        }
+        case DocsTypes.DOC_DELETE_CANCEL: {
+            const deletedDocument = { ...state.deletedDocument };
+            const all = { ...state.all };
+            all[deletedDocument.id] = deletedDocument;
+            return { ...state, deletedDocument: null, all };
         }
         case DocsTypes.DOC_UPDATE_SUCCESS: {
             const all = { ...state.all };