add loading spinners

Largo · Largo · commit f19ddfb39761 · 2024-02-13T15:39:26.000+09:00
diff --git a/canvas.html b/canvas.html
@@ -5,11 +5,32 @@
     <title>Ruby.wasm Quickstart</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="browser.script.iife.js"></script>
+    <style>
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border-left-color: #09f;
+            animation: spin 1s ease infinite;
+          }
+        
+          @keyframes spin {
+            0% {
+              transform: rotate(0deg);
+            }
+            100% {
+              transform: rotate(360deg);
+            }
+          }
+    </style>
     <script type="text/ruby">
-        require 'js'        
+        require 'js'
         # Create a canvas element
         window = JS.global
         document = window.document
+        document.getElementById("spinner").style.display = "none"
+
 
         canvas = document.createElement("canvas")
 
@@ -87,7 +108,8 @@
     </head>
     <body class="main">
         <h3>
-          We are loading...
+          Canvas Example
         </h3>
+        <div id="spinner" class="spinner"></div>
     </body>
 </html>
diff --git a/heartbeat.html b/heartbeat.html
@@ -5,6 +5,25 @@
     <title>Heartbeat Monitor Animation with Ruby.wasm</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="browser.script.iife.js"></script>
+    <style>
+      .spinner {
+        border: 4px solid rgba(0, 0, 0, 0.1);
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border-left-color: #09f;
+        animation: spin 1s ease infinite;
+      }
+    
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    </style>
     <script type="text/ruby">
         require 'js'
 
diff --git a/index.html b/index.html
@@ -21,15 +21,35 @@
             margin: 20px;
         }
 
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border-left-color: #09f;
+            animation: spin 1s ease infinite;
+          }
+        
+          @keyframes spin {
+            0% {
+              transform: rotate(0deg);
+            }
+            100% {
+              transform: rotate(360deg);
+            }
+          }
     </style>
 </head>
 <body>
     <h1>Ruby.wasm Quickstart</h1>
+    <div id="spinner" class="spinner"></div>
     <script type="text/ruby" data-eval="async">
         require 'kramdown'
         $window = JS.global
         $d = $window.document
 
+        $d.getElementById("spinner").style.display = "none"
+
         $d.createElement("h2").tap {|e|
             e.innerText = "Examples"
             $d.body.appendChild(e)
@@ -39,7 +59,7 @@ <h1>Ruby.wasm Quickstart</h1>
             div.classList.add("examples")
             $d.body.appendChild(div)
         }
-        examples = %w(heartbeat canvas kramdown require run-code shoppingList)
+        examples = %w(run-code shoppingList require canvas heartbeat kramdown)
         examples.each do |example|
             $d.createElement("a").tap {|link|
                 link.href = "#{example}.html"
@@ -61,7 +81,6 @@ <h1>Ruby.wasm Quickstart</h1>
                 $d.body.appendChild(e)
             }
         end
-
     </script>
 </body>
 </html>
diff --git a/kramdown.html b/kramdown.html
@@ -5,6 +5,25 @@
     <title>Ruby.wasm Quickstart</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="browser.script.iife.js"></script>
+    <style>
+      .spinner {
+        border: 4px solid rgba(0, 0, 0, 0.1);
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border-left-color: #09f;
+        animation: spin 1s ease infinite;
+      }
+
+      @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+      }
+    </style>
     <script type="text/ruby">
         require 'js'
         require 'kramdown'
@@ -18,12 +37,14 @@
 MARKDOWN
 
         div.innerHTML = Kramdown::Document.new(text).to_html
+        JS.global.document.getElementById("spinner").style.display = "none"
         JS.global.document.body.appendChild(div)
   </script>
     </head>
     <body class="main">
         <h3>
           Kramdown Example
         </h3>
+        <div id="spinner" class="spinner"></div>
     </body>
 </html>
diff --git a/require.html b/require.html
@@ -5,11 +5,34 @@
     <title>Multiple Files example</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="browser.script.iife.js"></script>
+    <style>
+        .spinner {
+          border: 4px solid rgba(0, 0, 0, 0.1);
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          border-left-color: #09f;
+          animation: spin 1s ease infinite;
+        }
+  
+        @keyframes spin {
+          0% {
+              transform: rotate(0deg);
+          }
+          100% {
+              transform: rotate(360deg);
+          }
+        }
+        .buttons {
+            display: none;
+        }
+      </style>
     </head>
     <body class="main">
         <h3>
           Multiple Files Example
         </h3>
+        <div id="spinner" class="spinner"></div>
         <div class="buttons">
             <button id="hello">Click me</button>
         </div>
diff --git a/require/main.rb b/require/main.rb
@@ -9,4 +9,7 @@ def require_relative(path)
 end
 app_path = __FILE__
 $0 = File::basename(app_path, ".rb") if app_path
-require_relative "require/second" # Here it should be relative to main.rb. Note: I will upstream the fix for this.
+require_relative "require/second" # Here it should be relative to main.rb. Note: I will upstream the fix for this.
+
+JS.global.document.getElementById("spinner").style.display = "none"
+JS.global.document.querySelector(".buttons").style.display = "block"
diff --git a/run-code.html b/run-code.html
@@ -13,10 +13,28 @@
             white-space: pre-wrap;
             margin-top: 20px;
         }
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border-left-color: #09f;
+            animation: spin 1s ease infinite;
+        }
+    
+        @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+        }
     </style>
 </head>
 <body>
     <h1>Code Runner</h1>
+    <div id="spinner" class="spinner"></div>
     <textarea id="ruby-code" rows="10" cols="50">
 document = JS.global.document
 div = document.createElement("div")
diff --git a/runCode.rb b/runCode.rb
@@ -7,6 +7,8 @@
   indentUnit: 4
 })
 
+JS.global.document.getElementById("spinner").style.display = "none"
+
 define_method :click_run_button do
   code_area = JS.global.document.getElementById("ruby-code")
   @window.editor.save
diff --git a/shoppingList.html b/shoppingList.html
@@ -45,6 +45,24 @@
         :checked ~ label {
           text-decoration: line-through;
         }
+
+        .spinner {
+          border: 4px solid rgba(0, 0, 0, 0.1);
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          border-left-color: #09f;
+          animation: spin 1s ease infinite;
+        }
+  
+        @keyframes spin {
+          0% {
+              transform: rotate(0deg);
+          }
+          100% {
+              transform: rotate(360deg);
+          }
+        }
     </style>
 </head>
 <body>
@@ -53,8 +71,10 @@ <h2>Shopping List</h2>
     <input type="text" id="new-item" placeholder="Add new item" />
     <button id="add-item">Add</button>
     <ul class="shopping-list" id="shopping-list"></ul>
-
+    <div id="spinner" class="spinner"></div>
+    
     <script type="text/ruby" data-eval="async">
+        JS.global.document.getElementById("spinner").style.display = "none"
         require "json"
         @document = JS.global.document
         @list = @document.getElementById("shopping-list")
