display submit buttons as loading gifs for transactions that might take a while

frontend/templates/fund_the_pledge.html

@@ -7,6 +7,7 @@
 <link type="text/css" rel="stylesheet" href="/static/css/campaign.css"  />
 <link type="text/css" rel="stylesheet" href="/static/css/pledge.css"  />
 {% include "stripe_stuff.html" %}
+<script type="text/javascript" src="/static/js/loader-gif.js"></script>
 <script type="application/x-javascript">
 
 var $j = jQuery.noConflict();
@@ -73,7 +74,7 @@ $j(document).ready(function() {
                 <form method="GET" action="{{ nonprofit.link }}">
                     {{ donate_form.non_field_errors }}
                     {{ donate_form }}
-                    <input name="donate_submit" type="submit" value="Donate" id="donate_submit" />
+                    <input name="donate_submit" type="submit" value="Donate" id="donate_submit" class="loader-gif" />
                 </form>
             </div>
             <div id="pledge_area">    	
@@ -113,7 +114,7 @@ $j(document).ready(function() {
                     {% csrf_token %}
                     {{ form.non_field_errors }}
                     {{ form.as_p }}	
-                    <input id="use_account_submit" name="use_account" type="submit" class="submit-button" value="Complete Pledge" /> 
+                    <input id="use_account_submit" name="use_account" type="submit" class="submit-button loader-gif" value="Complete Pledge" /> 
                 </div>           
             </form>
         </div>
@@ -178,7 +179,7 @@ $j(document).ready(function() {
                     </div>
     
                     <div class="payment-errors"></div>
-                    <input id="cc_submit" type="submit" class="submit-button" value="Complete Pledge" />
+                    <input id="cc_submit" type="submit" class="submit-button loader-gif" value="Complete Pledge" />
     
                 </form>
             </div>
@@ -215,7 +216,7 @@ kept around for reference as the page is overhauled
     	<form method="GET" action="{{nonprofit.link}}">
 			{{ donate_form.non_field_errors }}
 			{{donate_form}}
-			<input name="donate_submit" type="submit" value="Go Donate!" id="donate_submit" />
+			<input name="donate_submit" type="submit" value="Go Donate!" id="donate_submit" class="loader-gif"/>
     	</form>
 	
 	    </div>

frontend/templates/manage_account.html

@@ -98,7 +98,7 @@ $j(document).ready(function(){
             </div>
     
             <div class="payment-errors"></div>
-            <input id="cc_submit" type="submit" class="submit-button" value="Save Credit Card" />
+            <input id="cc_submit" type="submit" class="submit-button loader-gif" value="Save Credit Card" />
     
         </form>
     </div>

frontend/templates/pledge.html

@@ -8,7 +8,7 @@
 <link type="text/css" rel="stylesheet" href="/static/css/pledge.css"  />
 
 <script type="text/javascript" src="/static/js/reconcile_pledge.js"></script>
-
+<script type="text/javascript" src="/static/js/loader-gif.js"></script>
 {% endblock %}
 
 {% block news %}
@@ -115,7 +115,7 @@
 			<div id="ack_dedication" class="ack_inactive"><div class="ack_level">$100+</div><div class="ack_header">Your acknowledgement can include a dedication (140 characters max).&nbsp;{{ form.ack_dedication.label_tag }} {{ form.ack_dedication.errors }}{{ form.ack_dedication }}</div></div>
 			</div>
 			<div id="anonbox"><I>{{ form.anonymous.label_tag }}</I> {{ form.anonymous.errors }}{{ form.anonymous }}</div>
-			<input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Pledge Now"{% endif %} id="pledgesubmit" />
+			<input name="pledge" type="submit" {% if faqmenu == 'modify' %}value="Modify Pledge"{% else %}value="Pledge Now"{% endif %} id="pledgesubmit" class="loader-gif" />
 			<input name="decoy" type="submit" id="fakepledgesubmit" disabled="disabled" />
 			{% comment %}
 				When the pledge amount and premium are in an inconsistent state, the real button is disabled and (via css) hidden; instead we display this fake button with a helpful message.  It's a button so we can reuse all the existing CSS for buttons, so that it looks like the real button has just changed in appearance.  It's hidden and the other one un-disabled and un-hidden when the pledge & premium return to a correct state.  People without javascript enabled will miss out on the front-end corrections but form validation will catch it.

frontend/templates/stripe_stuff.html

@@ -46,6 +46,8 @@ $j(document).ready(function() {
 
 
 <script>
+var $j = jQuery.noConflict();
+
 function stripeResponseHandler(status, response) {
     if (response.error) {
         // re-enable the submit button
@@ -69,7 +71,7 @@ $j().ready(function() {
   $j("#payment-form").submit(function(event) {
     // disable the submit button to prevent repeated clicks
     $j('.submit-button').attr("disabled", "disabled");
-
+    
     Stripe.createToken({
         number: $j('.card-number').val(),
         cvc: $j('.card-cvc').val(),

static/less/sitewide2.less

@@ -202,7 +202,12 @@ input[type="submit"], a.fakeinput {
 	color: white;
 	font-weight: bold;
 	padding: 0.5em 1em;
-	cursor: pointer;
+	cursor: pointer;	
+}
+
+
+.loader-gif[disabled="disabled"], .loader-gif.show-loading {
+    background: url('/static/images/loading.gif') center no-repeat !important;
 }
 
 .js-page-wrap {