show exporting and saving animation

css/gpxedit.css

@@ -227,7 +227,7 @@ h3 {
     margin-left:20px;
     list-style-type:circle;
 }
-#saved, #failed, #loading {
+#saved, #failed, #loading, #exporting, #saving {
     /*width: 330px;*/
     padding-left: 5px;
     /*height: 35px;*/
@@ -250,11 +250,11 @@ h3 {
 #failed{
     background-color: red;
 }
-#saved .fa, #failed .fa, #loading .fa {
+#saved .fa, #failed .fa, #loading .fa, #exporting .fa, #saving .fa {
     font-size: 22px;
 }
 
-#saved p, #failed p, #loading p{
+#saved p, #failed p, #loading p, #exporting p, #saving p{
     padding: 6px 6px 6px 6px;
 }
 .clear {

js/gpxedit.js

@@ -862,6 +862,23 @@ function hideLoadingAnimation(){
     $('#loading').hide();
 }
 
+function showExportingAnimation(){
+    $('#exporting').show();
+}
+
+function hideExportingAnimation(){
+    $('#exporting').hide();
+}
+
+function showSavingAnimation(){
+    $('#saving').show();
+}
+
+function hideSavingAnimation(){
+    $('#saving').hide();
+}
+
+
 
 function loadAction(file){
     if (!endsWith(file, '.gpx') &&
@@ -1101,14 +1118,18 @@ function addExtraSymbols(){
 }
 
 function saveAction(targetPath){
+    showExportingAnimation();
     var saveFilePath = targetPath+'/'+$('input#saveName').val();
     var gpxText = generateGpx();
+    hideExportingAnimation();
+    showSavingAnimation();
     var req = {
         path: saveFilePath,
         content: gpxText 
     }
     var url = OC.generateUrl('/apps/gpxedit/savegpx');
     $.post(url, req).done(function (response) {
+        hideSavingAnimation();
         if (response.status === 'fiw'){
             showSaveFailAnimation(saveFilePath, t('gpxedit', 'Impossible to write file')+' : '+t('gpxedit', 'write access denied'));
         }

templates/gpxcontent.php

@@ -51,6 +51,14 @@ p($_['gpxedit_version']);
 		<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
 		<?php p($l->t('loading file')); ?>&nbsp;</p>
 	</div>
+	<div id="exporting"><p>
+		<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
+		<?php p($l->t('exporting file to gpx')); ?>&nbsp;</p>
+	</div>
+	<div id="saving"><p>
+		<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
+		<?php p($l->t('saving file')); ?>&nbsp;</p>
+	</div>
 <?php
 
 echo '<p id="username" style="display:none">';