Skip to content

Use Nprogress instead of spinning wheel #6443

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ta2-1 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Use Nprogress instead of spinning wheel #6443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65c890a
Add nprogress instead of spin
ta2-1 May 25, 2017
f17364b
Add unitAPI wrapper to the editor methods
ta2-1 May 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions pootle/static/css/editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,20 @@ textarea.translation,
margin: 180px auto;
}

.editor-progress-container
{
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}

.editor-progress
{
height: 5px;
}

.editor-overlay
{
background-color: rgba(255, 255, 255, 0.8);
Expand Down
182 changes: 94 additions & 88 deletions pootle/static/js/editor/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import cx from 'classnames';
import Levenshtein from 'levenshtein';
import mousetrap from 'mousetrap';
import assign from 'object-assign';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

import UnitAPI from 'api/UnitAPI';
import cookie from 'utils/cookie';
Expand All @@ -51,6 +53,10 @@ import ReactEditor from './index';
// be the actual entry point, entirely superseding the `app` module.
PTL.reactEditor = ReactEditor;

NProgress.configure({
parent: '#js-editor-progress',
showSpinner: false,
});

const CTX_STEP = 1;

Expand Down Expand Up @@ -122,20 +128,20 @@ PTL.editor = {

this.setActiveUnit = debounce((body, newUnit) => {
this.fetchUnits().always(() => {
UnitAPI.fetchUnit(newUnit.id, body)
.then(
(data) => {
this.setEditUnit(data);
this.renderUnit();
},
this.error
);
this.unitAPI({
method: 'fetchUnit',
params: { uId: newUnit.id, body },
success: (data) => {
this.setEditUnit(data);
this.renderUnit();
},
error: this.error,
});
});
}, 250);

/* Cached elements */
this.backToBrowserEl = q('.js-back-to-browser');
this.$editorActivity = $('#js-editor-act');
this.$editorBody = $('.js-editor-body');
this.editorTableEl = q('.js-editor-table');
this.$filterStatus = $('#js-filter-status');
Expand Down Expand Up @@ -166,8 +172,8 @@ PTL.editor = {

this.isUnitDirty = false;

this.isLoading = true;
this.showActivity();
this.isLoading = true;

this.fetchingOffsets = [];

Expand Down Expand Up @@ -398,24 +404,6 @@ PTL.editor = {
this.unitIndex(e);
});

/* XHR activity indicator */
$(document).ajaxStart(() => {
clearTimeout(this.delayedActivityTimer);
if (this.isLoading) {
return;
}

this.delayedActivityTimer = setTimeout(() => {
this.showActivity();
}, 3000);
});
$(document).ajaxStop(() => {
clearTimeout(this.delayedActivityTimer);
if (!this.isLoading) {
this.hideActivity();
}
});

/* Load MT providers */
this.settings.mt.forEach((provider) => {
require.ensure([], () => {
Expand Down Expand Up @@ -642,7 +630,6 @@ PTL.editor = {
this.isUnitDirty = false;
this.keepState = false;
this.isLoading = false;
this.hideActivity();
},

/* Things to do when no results are returned */
Expand All @@ -663,6 +650,11 @@ PTL.editor = {
return true;
},

unitAPI({ method, params, success, error, always }) {
this.showActivity();
return UnitAPI[method](params).then(success, error).always(always, () => this.hideActivity());
},


/*
* Text utils
Expand Down Expand Up @@ -1028,11 +1020,18 @@ PTL.editor = {

showActivity() {
this.hideMsg();
this.$editorActivity.spin().fadeIn(300);
if (this.isLoading) {
return;
}
clearTimeout(this.delayedActivityTimer);
this.delayedActivityTimer = setTimeout(() => NProgress.start(), 2000);
},

hideActivity() {
this.$editorActivity.spin(false).fadeOut(300);
if (!this.isLoading) {
clearTimeout(this.delayedActivityTimer);
NProgress.done();
}
},

/* Displays an informative message */
Expand Down Expand Up @@ -1482,11 +1481,13 @@ PTL.editor = {
if (previousUids.length > 0) {
reqData.previous_uids = previousUids;
}
return UnitAPI.fetchUnits(reqData)
.then(
(data) => this.storeUnitData(data, { isInitial: initial }),
this.error
).always(() => this.markAsFetched(offsetToFetch));
return this.unitAPI({
method: 'fetchUnits',
params: { body: reqData },
success: (data) => this.storeUnitData(data, { isInitial: initial }),
error: this.error,
always: () => this.markAsFetched(offsetToFetch),
});
}
/* eslint-disable new-cap */
return $.Deferred((deferred) => deferred.reject(false));
Expand Down Expand Up @@ -1627,11 +1628,12 @@ PTL.editor = {
};
assign(body, suggData);
}
UnitAPI.addTranslation(this.units.getCurrent().id, body)
.then(
(data) => this.processSubmission(data),
this.error
);
this.unitAPI({
method: 'addTranslation',
params: { uId: this.units.getCurrent().id, body },
success: (data) => this.processSubmission(data),
error: this.error,
});
},

processSubmission(data) {
Expand Down Expand Up @@ -1666,11 +1668,12 @@ PTL.editor = {
const body = assign({}, this.getValueStateData(ReactEditor.stateValues),
this.getReqData(), captchaCallbacks);

UnitAPI.addSuggestion(this.units.getCurrent().id, body)
.then(
(data) => this.processSuggestion(data),
this.error
);
this.unitAPI({
method: 'addSuggestion',
params: { uId: this.units.getCurrent().id, body },
success: (data) => this.processSuggestion(data),
error: this.error,
});
},

processSuggestion() {
Expand Down Expand Up @@ -1951,14 +1954,15 @@ PTL.editor = {

/* Gets more context units */
moreContext(amount = CTX_STEP) {
return (
UnitAPI.getContext(this.units.getCurrent().id,
{ gap: this.ctxGap, qty: amount })
.then(
(data) => this.handleContextSuccess(data),
this.error
)
);
return this.unitAPI({
method: 'getContext',
params: {
uId: this.units.getCurrent().id,
body: { gap: this.ctxGap, qty: amount },
},
success: (data) => this.handleContextSuccess(data),
error: this.error,
});
},

/* Shrinks context lines */
Expand Down Expand Up @@ -2047,11 +2051,12 @@ PTL.editor = {
e.preventDefault();
this.updateCommentDefaultProperties();

UnitAPI.addComment(this.units.getCurrent().id, $(e.target).serializeObject())
.then(
(data) => this.processAddComment(data),
this.error
);
this.unitAPI({
method: 'addComment',
params: { uId: this.units.getCurrent().id, body: $(e.target).serializeObject() },
success: (data) => this.processAddComment(data),
error: this.error,
});
},

processAddComment(data) {
Expand All @@ -2072,11 +2077,12 @@ PTL.editor = {
removeComment(e) {
e.preventDefault();

UnitAPI.removeComment(this.units.getCurrent().id)
.then(
() => $('.js-comment-first').fadeOut(200),
this.error
);
this.unitAPI({
method: 'removeComment',
params: { uId: this.units.getCurrent().id },
success: () => $('.js-comment-first').fadeOut(200),
error: this.error,
});
},


Expand All @@ -2092,15 +2098,12 @@ PTL.editor = {
return;
}

const $node = $('.translate-container');
$node.spin();

UnitAPI.getTimeline(this.units.getCurrent().id)
.then(
(data) => this.renderTimeline(data),
this.error
)
.always(() => $node.spin(false));
this.unitAPI({
method: 'getTimeline',
params: { uId: this.units.getCurrent().id },
success: (data) => this.renderTimeline(data),
error: this.error,
});
},

renderTimeline(data) {
Expand Down Expand Up @@ -2268,11 +2271,12 @@ PTL.editor = {
},

rejectSuggestion(suggId, { requestData = {} } = {}) {
UnitAPI.rejectSuggestion(this.units.getCurrent().id, suggId, requestData)
.then(
(data) => this.processRejectSuggestion(data, suggId),
this.error
);
this.unitAPI({
method: 'rejectSuggestion',
params: { uId: this.units.getCurrent().id, suggId, body: requestData },
success: (data) => this.processRejectSuggestion(data, suggId),
error: this.error,
});
},

processRejectSuggestion(data, suggId) {
Expand Down Expand Up @@ -2301,11 +2305,12 @@ PTL.editor = {
},

acceptSuggestion(suggId, { requestData = {}, skipToNext = false } = {}) {
UnitAPI.acceptSuggestion(this.units.getCurrent().id, suggId, requestData)
.then(
(data) => this.processAcceptSuggestion(data, suggId, skipToNext),
this.error
);
this.unitAPI({
method: 'acceptSuggestion',
params: { uId: this.units.getCurrent().id, suggId, body: requestData },
success: (data) => this.processAcceptSuggestion(data, suggId, skipToNext),
error: this.error,
});
},

processAcceptSuggestion(data, suggId, skipToNext) {
Expand Down Expand Up @@ -2344,11 +2349,12 @@ PTL.editor = {
const isFalsePositive = $check.hasClass('false-positive');

const opts = isFalsePositive ? null : { mute: 1 };
UnitAPI.toggleCheck(this.units.getCurrent().id, checkId, opts)
.then(
() => this.processToggleCheck(checkId, isFalsePositive),
this.error
);
this.unitAPI({
method: 'toggleCheck',
params: { uId: this.units.getCurrent().id, checkId, body: opts },
success: () => this.processToggleCheck(checkId, isFalsePositive),
error: this.error,
});
},

processToggleCheck(checkId, isFalsePositive) {
Expand Down
1 change: 1 addition & 0 deletions pootle/static/js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@
"diff-match-patch": "^1.0.0",
"imports-loader": "^0.6.3",
"mousetrap": "^1.5.3",
"nprogress": "^0.2.0",
"object-assign": "^2.0.0",
"react": "^0.14.6",
"react-addons-pure-render-mixin": "^0.14.6",
Expand Down
Loading