opensource/filestash
1
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2025-11-02 11:57:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mickael KERJEAN
2018-04-11 11:14:11 +10:00
parent e0006092cb
commit 76172f0239
4 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/components/loader.js
View File

@ -1,17 +1,20 @@
import React from 'react'; import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './loader.scss'; import './loader.scss';
export const Loader = (props) => { export const Loader = (props) => {
return ( return (
<div className="component_loader"> <ReactCSSTransitionGroup transitionName="loader" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={400}>
<svg width="120px" height="120px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> <div className="component_loader">
<rect x="0" y="0" width="100" height="100" fill="none"></rect> <svg width="120px" height="120px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="40" stroke="rgba(100%,100%,100%,0.679)" fill="none" strokeWidth="10" strokeLinecap="round"></circle> <rect x="0" y="0" width="100" height="100" fill="none"></rect>
<circle cx="50" cy="50" r="40" stroke="#6f6f6f" fill="none" strokeWidth="6" strokeLinecap="round"> <circle cx="50" cy="50" r="40" stroke="rgba(100%,100%,100%,0.679)" fill="none" strokeWidth="10" strokeLinecap="round"></circle>
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate> <circle cx="50" cy="50" r="40" stroke="#6f6f6f" fill="none" strokeWidth="6" strokeLinecap="round">
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate> <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate>
</circle> <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate>
</svg> </circle>
</div> </svg>
</div>
</ReactCSSTransitionGroup>
); );
}; };

9
client/components/loader.scss
View File

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

7
client/helpers/cache.js
View File

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

1
client/pages/filespage.js
View File

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