v2.4.1

use a separate circle in the progress svg for indefinite progress

app/templates/progress/index.js

@@ -28,7 +28,16 @@ module.exports = function(progressRatio, indefinite = false) {
         cy="${oRadius}"
         fill="transparent"/>
       <circle
-        class="${indefinite ? 'progress__indefinite' : 'progress__bar'}"
+        class="progress__indefinite ${indefinite ? '' : 'progress--invisible'}"
+        r="${radius}"
+        cx="${oRadius}"
+        cy="${oRadius}"
+        fill="transparent"
+        transform="rotate(-90 ${oRadius} ${oRadius})"
+        stroke-dasharray="${circumference}"
+        stroke-dashoffset="${dashOffset}"/>
+      <circle
+        class="progress__bar ${indefinite ? 'progress--invisible' : ''}"
         r="${radius}"
         cx="${oRadius}"
         cy="${oRadius}"

app/templates/progress/progress.css

@@ -37,3 +37,7 @@
   line-height: 58px;
   user-select: none;
 }
+
+.progress--invisible {
+  display: none;
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "firefox-send",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "firefox-send",
   "description": "File Sharing Experiment",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "author": "Mozilla (https://mozilla.org)",
   "repository": "mozilla/send",
   "homepage": "https://github.com/mozilla/send/",

webpack.config.js

@@ -107,7 +107,11 @@ module.exports = {
           {
             loader: 'svgo-loader',
             options: {
-              plugins: [{ convertStyleToAttrs: true }, { removeTitle: true }]
+              plugins: [
+                { removeViewBox: false },
+                { convertStyleToAttrs: true },
+                { removeTitle: true }
+              ]
             }
           }
         ]