feat: handle error on load page

Author: joonas-yoon

assets/js/main.js

@@ -243,13 +243,25 @@
       el.addEventListener('click', function(evt){
         evt.preventDefault();
         evt.stopPropagation();
+
+        const url = el.getAttribute('modal-href');
+        const $spinner = $modal.find('#modal-spinner');
+        const $content = $modal.find('#modal-content');
+        $spinner.show();
         $modal.fadeIn();
-        let url = el.getAttribute('modal-href');
-        let $content = $modal.find('#modal-content');
+
         $.ajax({
           url: 'pages/' + url,
+          dataType: 'html',
           success: function(html){
             $content.html(html);
+          },
+          error: function(request, status, error) {
+            let text = request.responseText || "Page Not Found";
+            $content.html(`<h1>${request.status} ${request.statusText}</h1><p style="color:#ff4545;">${text}</p>`);
+          },
+          complete: function() {
+            $spinner.hide();
           }
         })
       });

index.html

@@ -294,7 +294,7 @@ <h1 class="heading">Apps &amp; Projects</h1>
             </div>
           </div>
           <div class="col app-wrapper">
-            <a href="#" modal-href="sample.html" class="app display-block">
+            <a href="#" modal-href="sample.html" modal-bg="#eee" modal-fg="#333" class="app display-block">
               <img src="images/logos/buffalo-chess.png" alt="" />
             </a>
             <div class="details">
@@ -310,15 +310,15 @@ <h1 class="heading">Apps &amp; Projects</h1>
             </div>
           </div>
           <div class="col app-wrapper">
-            <a href="#" modal-href="sample.html" class="app display-block">
+            <a href="#" modal-href="sample2.html" class="app display-block">
               <img src="images/logos/rubiks-race.png" alt="" />
             </a>
             <div class="details">
               <p>Rubik's Race</p>
             </div>
           </div>
           <div class="col app-wrapper">
-            <a href="#" modal-href="sample.html" class="app display-block">
+            <a href="#" modal-href="sample3.html" class="app display-block">
               <img src="images/logos/jcloud.png" alt="" />
             </a>
             <div class="details">
@@ -415,6 +415,15 @@ <h5>Links</h5>
     </div>
     <div class="modal-wrapper">
       <div class="inner">
+        <div class="text-center" id="modal-spinner" style="padding: 3em 0;">
+          <div class="spinner-grow" style="width: 1rem; height: 1rem; animation-delay: 0ms;" role="status">
+            <span class="sr-only">Loading...</span>
+          </div>
+          <div class="spinner-grow" style="width: 1rem; height: 1rem; animation-delay: 100ms; margin-left: 1rem;" role="status">
+          </div>
+          <div class="spinner-grow" style="width: 1rem; height: 1rem; animation-delay: 200ms; margin-left: 1rem;" role="status">
+          </div>
+        </div>
         <div class="container my-5" id="modal-content">
         </div>
       </div>