This repository was archived by the owner on Mar 13, 2025. It is now read-only.
File tree 3 files changed +50
-1
lines changed
3 files changed +50
-1
lines changed Original file line number Diff line number Diff line change 8
8
const publicPath = '' ;
9
9
10
10
module . exports = {
11
+ entry : {
12
+ 'loading-indicator-animation' : './src/client/loading-indicator-animation' ,
13
+ } ,
11
14
externals : {
12
15
/* NodeJS library for https://logentries.com. It is server-side only. Exclude it as null. */
13
16
le_node : 'null' ,
Original file line number Diff line number Diff line change
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 ) ;
Original file line number Diff line number Diff line change 3
3
*/
4
4
5
5
import Application from 'shared' ;
6
+ import fs from 'fs' ;
7
+ import moment from 'moment' ;
8
+ import path from 'path' ;
6
9
import { factory as reducerFactory } from 'reducers' ;
7
10
import { redux , server as serverFactory } from 'topcoder-react-utils' ;
8
11
9
12
import webpackConfigFactory from '../../webpack.config' ;
10
13
11
14
const mode = process . env . BABEL_ENV ;
12
15
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
+
13
27
async function beforeRender ( req ) {
14
28
const store = await redux . storeFactory ( {
15
29
getReducerFactory : ( ) => reducerFactory ,
16
30
httpRequest : req ,
17
31
} ) ;
18
- return { store } ;
32
+ return { extraScripts : EXTRA_SCRIPTS , store } ;
19
33
}
20
34
21
35
global . KEEP_BUILD_INFO = true ;
You can’t perform that action at this time.
0 commit comments