Fixes #8.

src/Packagist/WebBundle/Resources/public/js/main.js

@@ -0,0 +1,9 @@
+window.showLoader = function () {
+	$('#loader').removeClass('hidden');
+	$('#loader').show();
+}
+
+window.hideLoader = function() {
+	$('#loader').addClass('hidden');
+	$('#loader').hide();	
+}

src/Packagist/WebBundle/Resources/public/js/submitPackage.js

@@ -0,0 +1,22 @@
+$(document).ready(function() {
+    
+    $('#submit').click(function(){
+        var repo_name = $('#package_repository').val();
+        $('#form').hide();
+    	showLoader();
+        $.getJSON(window.base + '/name', { url: repo_name }, function(data) {
+            $('#package_name').html(data);
+            $('#repo_name').html(repo_name);
+            hideLoader();
+            $('#confirmation_panel').show();
+        });
+        return false;
+    });
+    
+    $('#confirm').click(function(){
+    	$('#confirmation_panel').hide();
+    	showLoader();
+    	
+    	return true;
+    });
+});

src/Packagist/WebBundle/Resources/views/Web/submitPackage.html.twig

@@ -1,5 +1,9 @@
 {% extends "PackagistWebBundle::layout.html.twig" %}
 
+{% block scripts %}
+    <script src="{{ asset('bundles/packagistweb/js/submitPackage.js')}}"></script>
+{% endblock %}
+
 {% block content %}
     <h1>Submit package</h1>
     <form action="" method="POST" {{ form_enctype(form) }}>
@@ -14,27 +18,10 @@
             <input id="submit" type="submit" value="Submit" />
         </div>
         <div id="confirmation_panel" style="display:none;">
-            Please confirm:<br />
+            <em>Please confirm:</em><br />
             Package name:<span id="package_name"></span> <br />
             Repository:<span id="repo_name"></span><br />
             <input id="confirm" type="submit" value="Submit" />
         </div>
     </form>
-    <script>
-        $(document).ready(function() {
-            
-            $('#submit').click(function(){
-                var repo_name = $('#package_repository').val();
-                $('#form').hide();
-                
-                $.getJSON('{{ path("name") }}', { url: repo_name }, function(data) {
-                    $('#package_name').html(data);
-                    $('#repo_name').html(repo_name);
-                    $('#confirmation_panel').show();
-                });
-                return false;
-            });
-        });
-        
-    </script>
 {% endblock %}

src/Packagist/WebBundle/Resources/views/layout.html.twig

@@ -25,6 +25,8 @@
                 var s = document.getElementsByTagName('script')[0];
                 s.parentNode.insertBefore(wf, s);
             })();
+            
+            window.base = "{{ asset('img/..') }}";
         </script>
         <link rel="stylesheet" href="{{ asset('bundles/packagistweb/css/main.css') }}" />
 
@@ -71,6 +73,10 @@
             <div class="main" role="main">
                 {% block content %}
                 {% endblock %}
+                
+                <div id="loader" class="hidden">
+                    <img src="{{ asset('bundles/packagistweb/img/loader.gif')}}"></img>
+                </div>
             </div>
         </div>
 
@@ -83,5 +89,7 @@
             g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
             s.parentNode.insertBefore(g,s)}(document,'script'));
         </script>#}
+        
+        {% block scripts %}{% endblock %}
     </body>
 </html>