improvement (UI): faster cache lookup and display loader when it feels right

client/components/loader.js

@@ -1,8 +1,10 @@
 import React from 'react';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 import './loader.scss';
 
 export const Loader = (props) => {
     return (
+        <ReactCSSTransitionGroup transitionName="loader" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={400}>
           <div className="component_loader">
             <svg width="120px" height="120px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
               <rect x="0" y="0" width="100" height="100" fill="none"></rect>
@@ -13,5 +15,6 @@ export const Loader = (props) => {
               </circle>
             </svg>
           </div>
+        </ReactCSSTransitionGroup>
     );
 };

client/components/loader.scss

@@ -2,3 +2,12 @@
     text-align: center;
     margin-top: 50px;
 }
+
+.loader-appear{
+    opacity: 0;
+}
+.loader-appear.loader-appear-active{
+    transition: opacity 0.1s ease-out;
+    transition-delay: 0.3s;
+    opacity: 1;
+}

client/helpers/cache.js

@@ -46,8 +46,9 @@ Data.prototype._vacuum = function(){
  */
 Data.prototype.get = function(type, path, _record_access = true){
     if(type !== this.FILE_PATH && type !== this.FILE_CONTENT) return Promise.reject({});
+
     return this.db.then((db) => {
-        const tx = db.transaction(type, "readwrite");
+        const tx = db.transaction(type, "readonly");
         const store = tx.objectStore(type);
         const query = store.get(path);
         return new Promise((done, error) => {
@@ -58,7 +59,9 @@ Data.prototype.get = function(type, path, _record_access = true){
                     data.last_access = new Date();
                     if(!data.access_count) data.access_count = 0;
                     data.access_count += 1;
+                    window.requestAnimationFrame(() => {
                         this.put(type, data.path, data);
+                    });
                 }
             };
             tx.onerror = error;

client/pages/filespage.js

@@ -74,6 +74,7 @@ export class FilesPage extends React.Component {
     onRefresh(path = this.state.path){
         this.resetHeight();
         this._cleanupListeners();
+
         const observer = Files.ls(path).subscribe((res) => {
             if(res.status === 'ok'){
                 let files = res.results;