Index: ow/static/css/main.css
===================================================================
--- ow/static/css/main.css	(revision f89b2f1cd12fc63260253b6ccc89e040de3d210b)
+++ ow/static/css/main.css	(revision c82fe7978f6139665c8be1f709bc07563855d3c2)
@@ -3,5 +3,5 @@
   font-style: italic;
   font-weight: 300;
-  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
+  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(https://fonts.gstatic.com/s/opensans/v17/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
 }
 @font-face {
@@ -9,5 +9,5 @@
   font-style: italic;
   font-weight: 400;
-  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v17/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
 }
 @font-face {
@@ -15,5 +15,5 @@
   font-style: italic;
   font-weight: 700;
-  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(https://fonts.gstatic.com/s/opensans/v17/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
 }
 @font-face {
@@ -21,5 +21,5 @@
   font-style: normal;
   font-weight: 300;
-  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
+  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
 }
 @font-face {
@@ -27,5 +27,5 @@
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
 }
 @font-face {
@@ -33,5 +33,5 @@
   font-style: normal;
   font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
 }
 @font-face {
@@ -39,5 +39,5 @@
   font-style: normal;
   font-weight: 800;
-  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
+  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
 }
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@@ -446,5 +446,6 @@
 .wrapper-l,
 .wrapper-xl,
-.ow-forms {
+.ow-forms,
+.uploading-workout {
   display: block;
   width: 100%;
@@ -458,5 +459,6 @@
   .wrapper-l,
   .wrapper-xl,
-  .ow-forms {
+  .ow-forms,
+  .uploading-workout {
     padding-left: 2rem;
     padding-right: 2rem;
@@ -468,5 +470,6 @@
   .wrapper-l,
   .wrapper-xl,
-  .ow-forms {
+  .ow-forms,
+  .uploading-workout {
     padding-left: 4rem;
     padding-right: 4rem;
@@ -478,5 +481,6 @@
   .wrapper-l,
   .wrapper-xl,
-  .ow-forms {
+  .ow-forms,
+  .uploading-workout {
     padding-left: 5rem;
     padding-right: 5rem;
@@ -488,5 +492,6 @@
   .wrapper-l,
   .wrapper-xl,
-  .ow-forms {
+  .ow-forms,
+  .uploading-workout {
     padding-left: 6rem;
     padding-right: 6rem;
@@ -495,5 +500,6 @@
 @media (min-width: 320px) {
   .wrapper-s,
-  .ow-forms {
+  .ow-forms,
+  .uploading-workout {
     max-width: 740px;
   }
@@ -1310,5 +1316,14 @@
   background-color: #e1e1e1;
 }
-.ow-forms {
+.uploading-workout {
+  /* Extends ow-forms, as we use a div with this class to show as a
+       replacement of the uploading form while the form is submitting
+       (that could take some time when uploading bigger tracking files) */
+  width: 100%;
+  text-align: center;
+  display: none;
+}
+.ow-forms,
+.uploading-workout {
   padding-top: 2em;
 }
Index: ow/static/less/modules/workout.less
===================================================================
--- ow/static/less/modules/workout.less	(revision f89b2f1cd12fc63260253b6ccc89e040de3d210b)
+++ ow/static/less/modules/workout.less	(revision c82fe7978f6139665c8be1f709bc07563855d3c2)
@@ -438,2 +438,15 @@
     }
 }
+
+
+.uploading-workout {
+    /* Extends ow-forms, as we use a div with this class to show as a
+       replacement of the uploading form while the form is submitting
+       (that could take some time when uploading bigger tracking files) */
+    &:extend(.ow-forms);
+    width: 100%;
+    text-align: center;
+    // We need to force this here, extending from ow-forms invalidates using
+    // the "hidden" mixin class elements with this class
+    display: none;
+}
Index: ow/templates/add_workout.pt
===================================================================
--- ow/templates/add_workout.pt	(revision f89b2f1cd12fc63260253b6ccc89e040de3d210b)
+++ ow/templates/add_workout.pt	(revision c82fe7978f6139665c8be1f709bc07563855d3c2)
@@ -17,11 +17,21 @@
 
   <metal:content metal:fill-slot="content">
+
+    <div class="uploading-workout hidden">
+      <h2 i18n:translate="">Uploading workout, please wait...</h2>
+      <p i18n:translate="">
+        This can take a moment, depending on the size of your tracking file and your connection speed. Be patient and please don't hit the stop or go back buttons on your browser.
+      </p>
+      <img src="" alt="Loading workout" i18n:attributes="alt"
+           tal:attributes="src request.static_url('ow:static/media/img/loading.gif')">
+    </div>
+
     <div class="upload-workout ow-forms">
       <a href="" class="back"
-           tal:attributes="href request.resource_url(context)"
-           i18n:translate="">Back</a>
+         tal:attributes="href request.resource_url(context)"
+         i18n:translate="">Back</a>
       <h2 i18n:translate="">Upload workout file</h2>
-        ${form.begin(multipart=True)}
-        ${form.csrf_token()}
+      ${form.begin(multipart=True)}
+      ${form.csrf_token()}
 
       <tal:is_duplicate tal:condition="duplicate is not None">
@@ -107,7 +117,20 @@
 
       ${form.end()}
-    </div>
+        </div>
 
   </metal:content>
 
+  <metal:body-js metal:fill-slot="body-js">
+    <script>
+        $(document).ready(function(){
+            $("div.upload-workout form").on("submit", function(){
+                console.log('Showing spinner');
+                $("div.upload-workout").fadeOut();
+                $("div.uploading-workout").fadeIn();
+            });
+        });
+    </script>
+  </metal:body-js>
+
+
 </html>
