From 37824ad373fa38711459248004c0462c5ad253a8 Mon Sep 17 00:00:00 2001
From: Stepan Usatiuk <stepanusatiuk@gmail.com>
Date: Mon, 11 Feb 2019 13:58:05 +0300
Subject: [PATCH] use native animations (fixes #2)

---
 frontend/src/Auth/AuthScreen.tsx        | 7 ++++---
 frontend/src/Documents/DocumentEdit.tsx | 1 +
 frontend/src/Home/Home.tsx              | 7 ++++---
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Auth/AuthScreen.tsx b/frontend/src/Auth/AuthScreen.tsx
index e4d1110..113c190 100644
--- a/frontend/src/Auth/AuthScreen.tsx
+++ b/frontend/src/Auth/AuthScreen.tsx
@@ -7,7 +7,7 @@ import {
     Switch,
     withRouter,
 } from "react-router";
-import { Transition } from "react-spring/renderprops";
+import { animated, Transition } from "react-spring/renderprops";
 import { IAppState } from "~redux/reducers";
 
 import { Login } from "./Login";
@@ -30,6 +30,7 @@ export class AuthScreenComponent extends React.PureComponent<IAuthScreenProps> {
         ) : (
             <div className="animationWrapper">
                 <Transition
+                    native={true}
                     items={location}
                     keys={location.pathname}
                     from={{
@@ -46,12 +47,12 @@ export class AuthScreenComponent extends React.PureComponent<IAuthScreenProps> {
                     }}
                 >
                     {(_location: any) => (style: any) => (
-                        <div style={style}>
+                        <animated.div style={style}>
                             <Switch location={_location}>
                                 <Route path="/login" component={Login} />
                                 <Route path="/signup" component={Signup} />
                             </Switch>
-                        </div>
+                        </animated.div>
                     )}
                 </Transition>
             </div>
diff --git a/frontend/src/Documents/DocumentEdit.tsx b/frontend/src/Documents/DocumentEdit.tsx
index b11525c..7591dd9 100644
--- a/frontend/src/Documents/DocumentEdit.tsx
+++ b/frontend/src/Documents/DocumentEdit.tsx
@@ -107,6 +107,7 @@ export class DocumentEditComponent extends React.PureComponent<
                 </div>
             );
         } else {
+            this.tryLoad();
             return this.props.spinner && <LoadingStub />;
         }
     }
diff --git a/frontend/src/Home/Home.tsx b/frontend/src/Home/Home.tsx
index 9f48991..6720242 100644
--- a/frontend/src/Home/Home.tsx
+++ b/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 { config, Transition } from "react-spring/renderprops";
+import { animated, 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,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                     </Navbar>
                     <div id="MainScreen" className="animationWrapper">
                         <Transition
+                        native={true}
                             config={{
                                 ...config.default,
                                 clamp: true,
@@ -132,7 +133,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                             }}
                         >
                             {(_location: any) => (style: any) => (
-                                <div style={style} className="viewComponent">
+                                <animated.div style={style} className="viewComponent">
                                     <Switch location={_location}>
                                         <Route
                                             path="/docs/:id/edit"
@@ -144,7 +145,7 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                                         />
                                         <Route path="/" component={Overview} />
                                     </Switch>
-                                </div>
+                                </animated.div>
                             )}
                         </Transition>
                     </div>