Merge branch 'develop'

Author: birdofpreyru

__tests__/shared/__snapshots__/index.jsx.snap

@@ -3,8 +3,8 @@
 exports[`Matches shallow snapshot 1`] = `
 <div>
   <Connect(MetaTags)
-    description="Yet another webapp based on Topcoder React Starter Kit"
-    title="Topcoder React Starter"
+    description="Topcoder Payment Tool"
+    title="Topcoder Payment Tool"
   />
   <Routes />
 </div>
@@ -13,8 +13,8 @@ exports[`Matches shallow snapshot 1`] = `
 exports[`Matches shallow snapshot in dev mode 1`] = `
 <div>
   <Connect(MetaTags)
-    description="Yet another webapp based on Topcoder React Starter Kit"
-    title="Topcoder React Starter"
+    description="Topcoder Payment Tool"
+    title="Topcoder Payment Tool"
   />
   <Routes />
   <DevTools />

config/webpack/default.js

@@ -8,6 +8,9 @@
 const publicPath = '';
 
 module.exports = {
+  entry: {
+    'loading-indicator-animation': './src/client/loading-indicator-animation',
+  },
   externals: {
     /* NodeJS library for https://logentries.com. It is server-side only. Exclude it as null. */
     le_node: 'null',

src/client/loading-indicator-animation.js

@@ -0,0 +1,32 @@
+/**
+ * Client-side loading indicator animation.  <LoadingIndicator> will often be rendered
+ * server-side and animation code contained in the React component will not be loaded into
+ * the browser.  The following approach should animate any <LoadingIndicators> present
+ * regardless of how they were rendered.
+ * It might be possible to change the code to be class based rather than id based
+ * so that multiple LoadingIndicators could be animated simulataneously
+ * however it's difficult to determine what the class names will be due to the
+ * automatic React class namespacing.
+ */
+
+/* eslint-env browser */
+
+function animateLoadingIndicators(timestamp) {
+  const updateCircle = (circle, offset) => {
+    const phase1 = ((timestamp / 1000 / 2) + offset) % 1;
+    circle.setAttribute('r', 28 * phase1 * (2.0 - phase1));
+    circle.setAttribute('opacity', 1.0 - (phase1 * phase1));
+  };
+
+  const circle1 =
+    document.querySelectorAll('circle[id="loading-indicator-circle1"]');
+  const circle2 =
+    document.querySelectorAll('circle[id="loading-indicator-circle2"]');
+
+  circle1.forEach(x => updateCircle(x, 0));
+  circle2.forEach(x => updateCircle(x, 0.5));
+
+  window.requestAnimationFrame(animateLoadingIndicators);
+}
+
+window.requestAnimationFrame(animateLoadingIndicators);

src/server/index.js

@@ -3,19 +3,33 @@
  */
 
 import Application from 'shared';
+import fs from 'fs';
+import moment from 'moment';
+import path from 'path';
 import { factory as reducerFactory } from 'reducers';
 import { redux, server as serverFactory } from 'topcoder-react-utils';
 
 import webpackConfigFactory from '../../webpack.config';
 
 const mode = process.env.BABEL_ENV;
 
+let ts = path.resolve(__dirname, '../../.build-info');
+ts = JSON.parse(fs.readFileSync(ts));
+ts = moment(ts.timestamp).valueOf();
+
+const EXTRA_SCRIPTS = [
+  `<script
+      src="/loading-indicator-animation-${ts}.js"
+      type="application/javascript"
+  ></script>`,
+];
+
 async function beforeRender(req) {
   const store = await redux.storeFactory({
     getReducerFactory: () => reducerFactory,
     httpRequest: req,
   });
-  return { store };
+  return { extraScripts: EXTRA_SCRIPTS, store };
 }
 
 global.KEEP_BUILD_INFO = true;

src/shared/index.jsx

@@ -17,8 +17,8 @@ export default function Application() {
   return (
     <div>
       <MetaTags
-        title="Topcoder React Starter"
-        description="Yet another webapp based on Topcoder React Starter Kit"
+        title="Topcoder Payment Tool"
+        description="Topcoder Payment Tool"
       />
       <Routes />
       { isomorphy.isDevBuild() ? <DevTools /> : undefined }