VEIOSS-679 | Make submit button disappear on submission of returns

app/assets/javascripts/app.js

@@ -106,3 +106,17 @@ if (typeof HMRCAccessibleAutocomplete != 'undefined' && document.querySelector('
   }
 }
 
+function showTheSpinner() {
+
+    const processingWheel = document.getElementById("processing-wheel");
+
+    //make the spinning wheel visible
+    processingWheel.removeAttribute("aria-hidden");
+    processingWheel.hidden = false;
+
+    //make the elements hidden
+    document.getElementById("processing-button-group").style.visibility = 'hidden';
+
+    return false;
+}
+

app/assets/stylesheets/import-one-stop-shop.css

@@ -85,4 +85,41 @@ html[data-useragent*='MSIE 10.0'] .flex-container .tile {
 .autocomplete__dropdown-arrow-down {
     z-index: 0;
     pointer-events: none;
-}
+}
+
+/* Dynamic spinner for please-wait page within file upload journey */
+.processing-wheel-loader {
+    border: 12px solid #DEE0E2;
+    border-radius: 50%;
+    border-top-color: #005EA5;
+    width: 50px;
+    height: 50px;
+    -webkit-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+}
+
+#processing-wheel {
+    margin-top: -75px;
+}
+
+@-webkit-keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* End of dynamic spinner */

app/views/CheckYourAnswersView.scala.html

@@ -14,14 +14,14 @@
  * limitations under the License.
  *@
 
-@import components.ButtonGroup
+@import components.ButtonGroupProcessing
 @import models.etmp.EtmpExclusion
 
 @this(
         layout: templates.Layout,
         formHelper: FormWithCSRF,
         govukSummaryList: GovukSummaryList,
-        button: ButtonGroup,
+        button: ButtonGroupProcessing,
         govukButton: GovukButton,
         govukWarningText: GovukWarningText
 )
@@ -144,4 +144,13 @@ <h2 class="govuk-heading-m push--top">@messages("error.missing_answers_header")<
                 )
             }
         }
+
+        <div id="processing-wheel" hidden>
+            <div id="processing" aria-live="polite" class="govuk-!-margin-bottom-9">
+                <h2 class="govuk-heading-m">
+                    @messages("site.processing")
+                </h2>
+                <div class="processing-wheel-loader"></div>
+            </div>
+        </div>
     }

app/views/components/ButtonGroupProcessing.scala.html

@@ -0,0 +1,28 @@
+@*
+ * Copyright 2024 HM Revenue & Customs
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *@
+
+@import uk.gov.hmrc.play.bootstrap.binders.RedirectUrl
+@this(govukButton: GovukButton)
+@(continueMessage: String, continueUrl: String, period: Period, waypoints: Waypoints)(implicit messages: Messages)
+<div class="govuk-button-group" id="processing-button-group">
+    @govukButton(
+        ButtonViewModel(messages(continueMessage)).withAttribute(("id", "continue")).withAttribute("onclick", "showTheSpinner()")
+    )
+
+    <a id="saveProgress" role="button" href="@routes.SavedProgressController.onPageLoad(period, RedirectUrl(continueUrl))" class="govuk-button govuk-button--secondary" data-module="govuk-button">
+      @messages("saveProgress.button")
+    </a>
+</div>

build.sbt

@@ -65,7 +65,7 @@ lazy val root = (project in file("."))
     // below line required to force asset pipeline to operate in dev rather than only prod
     Assets / pipelineStages := Seq(concat, uglify),
     // only compress files generated by concat
-    uglify / includeFilter := GlobFilter("application.js")
+    uglify / includeFilter := GlobFilter("application*.js")
   )
 
 lazy val testSettings: Seq[Def.Setting[_]] = Seq(

conf/messages.en

@@ -13,6 +13,7 @@ site.govuk = GOV.UK
 site.to = to
 site.submit = Submit
 site.warning = Warning
+site.processing = We are processing your registration.
 
 date.day = Day
 date.month = Month