Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 6a5f961

Browse files
committed
Adds missing animation of the loading indicator
1 parent 606467f commit 6a5f961

File tree

3 files changed

+50
-1
lines changed

3 files changed

+50
-1
lines changed

config/webpack/default.js

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88
const publicPath = '';
99

1010
module.exports = {
11+
entry: {
12+
'loading-indicator-animation': './src/client/loading-indicator-animation',
13+
},
1114
externals: {
1215
/* NodeJS library for https://logentries.com. It is server-side only. Exclude it as null. */
1316
le_node: 'null',
+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Client-side loading indicator animation. <LoadingIndicator> will often be rendered
3+
* server-side and animation code contained in the React component will not be loaded into
4+
* the browser. The following approach should animate any <LoadingIndicators> present
5+
* regardless of how they were rendered.
6+
* It might be possible to change the code to be class based rather than id based
7+
* so that multiple LoadingIndicators could be animated simulataneously
8+
* however it's difficult to determine what the class names will be due to the
9+
* automatic React class namespacing.
10+
*/
11+
12+
/* eslint-env browser */
13+
14+
function animateLoadingIndicators(timestamp) {
15+
const updateCircle = (circle, offset) => {
16+
const phase1 = ((timestamp / 1000 / 2) + offset) % 1;
17+
circle.setAttribute('r', 28 * phase1 * (2.0 - phase1));
18+
circle.setAttribute('opacity', 1.0 - (phase1 * phase1));
19+
};
20+
21+
const circle1 =
22+
document.querySelectorAll('circle[id="loading-indicator-circle1"]');
23+
const circle2 =
24+
document.querySelectorAll('circle[id="loading-indicator-circle2"]');
25+
26+
circle1.forEach(x => updateCircle(x, 0));
27+
circle2.forEach(x => updateCircle(x, 0.5));
28+
29+
window.requestAnimationFrame(animateLoadingIndicators);
30+
}
31+
32+
window.requestAnimationFrame(animateLoadingIndicators);

src/server/index.js

+15-1
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,33 @@
33
*/
44

55
import Application from 'shared';
6+
import fs from 'fs';
7+
import moment from 'moment';
8+
import path from 'path';
69
import { factory as reducerFactory } from 'reducers';
710
import { redux, server as serverFactory } from 'topcoder-react-utils';
811

912
import webpackConfigFactory from '../../webpack.config';
1013

1114
const mode = process.env.BABEL_ENV;
1215

16+
let ts = path.resolve(__dirname, '../../.build-info');
17+
ts = JSON.parse(fs.readFileSync(ts));
18+
ts = moment(ts.timestamp).valueOf();
19+
20+
const EXTRA_SCRIPTS = [
21+
`<script
22+
src="/loading-indicator-animation-${ts}.js"
23+
type="application/javascript"
24+
></script>`,
25+
];
26+
1327
async function beforeRender(req) {
1428
const store = await redux.storeFactory({
1529
getReducerFactory: () => reducerFactory,
1630
httpRequest: req,
1731
});
18-
return { store };
32+
return { extraScripts: EXTRA_SCRIPTS, store };
1933
}
2034

2135
global.KEEP_BUILD_INFO = true;

0 commit comments

Comments
 (0)