diff --git a/apimanager/metrics/static/metrics/js/include_system_calls.js b/apimanager/metrics/static/metrics/js/include_system_calls.js
index e69de29..461a7f2 100644
--- a/apimanager/metrics/static/metrics/js/include_system_calls.js
+++ b/apimanager/metrics/static/metrics/js/include_system_calls.js
@@ -0,0 +1,10 @@
+$(document).ready(function () {
+    $('.spinner').on('click', function() {
+        var e=this;
+        setTimeout(function() {
+            e.innerHTML='<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';
+            e.disabled=true;
+        },0);
+        return true;
+    });
+});
diff --git a/apimanager/metrics/templates/metrics/custom_summary.html b/apimanager/metrics/templates/metrics/custom_summary.html
index 4cb3001..358ff21 100644
--- a/apimanager/metrics/templates/metrics/custom_summary.html
+++ b/apimanager/metrics/templates/metrics/custom_summary.html
@@ -57,19 +57,7 @@
 					</div>
 				</div>
 			</div>
-			<button type="submit" class="btn btn-primary">{% trans "Search" %}</button>
-			<script>
-			$(document).ready(function () {
-				$('.btn').on('click', function() {
-					var e=this;
-					setTimeout(function() {
-						e.innerHTML='<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';
-						e.disabled=true;
-					},0);
-					return true;
-				});
-			});
-			</script>
+			<button type="submit" class="btn btn-primary spinner">{% trans "Search" %}</button>
 		</form>
 	</div>
     	<div class="tab-content">
@@ -157,6 +145,9 @@
 
 {% endblock %}
 
+{% block extrajs %}
+<script type="text/javascript" src="{% static 'metrics/js/include_system_calls.js' %}"></script>
+{% endblock extrajs %}
 {% block extracss %}
 		<link href="{% static 'metrics/css/metrics.css' %}" rel="stylesheet">
 {% endblock extracss %}
\ No newline at end of file