Attempt to make loading indicator

Author: hongquan

api/_public/main.js

@@ -8,6 +8,7 @@ const highlighter = await createHighlighter({
   langs: ['shellsession', 'shell'],
 })
 
+document.getElementById('hl-loading')?.remove()
 console.log('highlighter', highlighter)
 
 
@@ -16,14 +17,29 @@ document.addEventListener('alpine:init', () => {
     curl: '',
     httpie: '',
     errors: [],
+    loading: false,
+    highlighting: false,
+    highlightedHtml: '',
     async onSubmit() {
+      this.loading = true
       const { httpie, errors } = await ky.post('/api/', { json: { curl: this.curl } }).json()
       this.httpie = '$ ' + httpie
       this.errors = errors
+      this.loading = false
+      this.highlighting = true
+      setTimeout(() => {
+        this.highlightedHtml = highlighter.codeToHtml(this.httpie, { lang: 'shellsession', theme: 'andromeeda' })
+        this.highlighting = false
+      }, 0)
     },
     colorizeHttpie() {
       if (!this.httpie) return ''
       return highlighter.codeToHtml(this.httpie, { lang: 'shellsession', theme: 'andromeeda' })
+    },
+    copyHttpie() {
+      const cmd = (this.httpie || '').replace(/^\$ /, '')
+      if (!cmd) return
+      navigator.clipboard?.writeText(cmd)
     }
   }))
 })

api/_public/uno.css

@@ -23,6 +23,7 @@
 .mx-auto{margin-left:auto;margin-right:auto;}
 .mb-8{margin-bottom:2rem;}
 .mt-4{margin-top:1rem;}
+.inline-block{display:inline-block;}
 .h-4{height:1rem;}
 .h-48{height:12rem;}
 .h-5{height:1.25rem;}
@@ -36,32 +37,46 @@
 .flex{display:flex;}
 .grow{flex-grow:1;}
 .flex-col{flex-direction:column;}
+@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
+.animate-spin{animation:spin 1s linear infinite;}
 .cursor-pointer{cursor:pointer;}
 .select-none{-webkit-user-select:none;user-select:none;}
 .resize-y{resize:vertical;}
 .items-center{align-items:center;}
 .justify-between{justify-content:space-between;}
 .gap-1{gap:0.25rem;}
+.gap-2{gap:0.5rem;}
 .space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
 .overflow-hidden{overflow:hidden;}
+.border-2{border-width:2px;}
+.border-white{--un-border-opacity:1;border-color:rgb(255 255 255 / var(--un-border-opacity));}
+.border-t-purple-500{--un-border-opacity:1;--un-border-top-opacity:var(--un-border-opacity);border-top-color:rgb(168 85 247 / var(--un-border-top-opacity));}
+.rounded{border-radius:0.25rem;}
+.rounded-full{border-radius:9999px;}
 .rounded-t{border-top-left-radius:0.25rem;border-top-right-radius:0.25rem;}
-.bg-gray-900{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity));}
+.bg-gray-700{--un-bg-opacity:1;background-color:rgb(55 65 81 / var(--un-bg-opacity)) /* #374151 */;}
+.bg-gray-900{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity)) /* #111827 */;}
+.hover\:bg-gray-600:hover{--un-bg-opacity:1;background-color:rgb(75 85 99 / var(--un-bg-opacity)) /* #4b5563 */;}
 .from-gray-700{--un-gradient-from-position:0%;--un-gradient-from:rgb(55 65 81 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(55 65 81 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
 .to-gray-800{--un-gradient-to-position:100%;--un-gradient-to:rgb(31 41 55 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
-.bg-gradient-to-b{--un-gradient-shape:to bottom;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
+.bg-gradient-to-b{--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
 .p-1{padding:0.25rem;}
 .p-2{padding:0.5rem;}
 .px-2{padding-left:0.5rem;padding-right:0.5rem;}
+.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
+.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
 .pb-2{padding-bottom:0.5rem;}
 .text-center{text-align:center;}
 .text-sm{font-size:0.875rem;line-height:1.25rem;}
-.text-gray-300{--un-text-opacity:1;color:rgb(209 213 219 / var(--un-text-opacity));}
-.text-purple-600{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity));}
-.text-red-400{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));}
-.hover\:text-red-400:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));}
+.text-xs{font-size:0.75rem;line-height:1rem;}
+.text-gray-300{--un-text-opacity:1;color:rgb(209 213 219 / var(--un-text-opacity)) /* #d1d5db */;}
+.text-purple-600{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity)) /* #9333ea */;}
+.text-red-400{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity)) /* #f87171 */;}
+.hover\:text-red-400:hover{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity)) /* #f87171 */;}
 .font-bold{font-weight:700;}
 .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
 .shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
+.drop-shadow{--un-drop-shadow:drop-shadow(0 1px 2px var(--un-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--un-drop-shadow-color, rgb(0 0 0 / 0.06)));filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
 @media (min-width: 640px){
 .sm\:flex-row{flex-direction:row;}
 .sm\:resize-none{resize:none;}

api/templates/index.jinja

@@ -41,13 +41,24 @@
             <svg class='w-5 h-5 cursor-pointer' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'></path></svg>
             <span class='font-bold select-none'>Terminal</span>
           </div>
-          <div class='flex items-center gap-1'>
+          <div class='flex items-center gap-2'>
+            <div id='hl-loading' class='flex items-center'>
+              <span class='inline-block w-4 h-4 border-2 border-white border-t-purple-500 rounded-full animate-spin drop-shadow'></span>
+            </div>
+            <div class='flex items-center' x-show='loading'>
+              <span class='inline-block w-4 h-4 border-2 border-white border-t-purple-500 rounded-full animate-spin drop-shadow'></span>
+            </div>
+            <button class='text-xs px-2 py-1 rounded bg-gray-700 hover:bg-gray-600' x-on:click='copyHttpie()'>Copy</button>
             <svg class='w-4 h-4 cursor-pointer hover:text-red-400' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'></path></svg>
             <svg class='w-4 h-4 cursor-pointer hover:text-red-400' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 15l7-7 7 7'></path></svg>
             <svg class='w-4 h-4 cursor-pointer hover:text-red-400' fill='currentColor' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z' clip-rule='evenodd'></path></svg>
           </div>
         </div>
-        <div class='p-1 bg-gray-900 font-mono min-h-24' x-html='colorizeHttpie()'>
+        <div class='p-1 bg-gray-900 font-mono min-h-24'>
+          <div x-show='highlighting' class='py-2'>
+            <span class='inline-block w-4 h-4 border-2 border-white border-t-purple-500 rounded-full animate-spin drop-shadow'></span>
+          </div>
+          <div x-show='!highlighting' x-html='highlightedHtml'></div>
         </div>
       </div>
 

pyproject.toml

@@ -13,11 +13,11 @@ dependencies = [
   "orjson>=3.10.15",
   "first>=2.0.2",
   "http-constants>=0.5.0",
-  "logbook>=1.8.0",
+  "logbook>=1.9.2",
   "kiss-headers>=2.5.0",
-  "pydantic>=2.10.6",
-  "typed-argument-parser>=1.10.1",
-  "pydantic-settings>=2.7.1",
+  "pydantic>=2.12.5",
+  "typed-argument-parser>=1.11.0",
+  "pydantic-settings>=2.12.0",
 ]
 classifiers = [
   "Intended Audience :: Developers",
@@ -40,7 +40,7 @@ dev = [
   "jinja2>=3.1.5",
 ]
 lint = [
-    "ruff>=0.9.5",
+    "ruff>=0.14.10",
 ]
 test = [
     "mypy>=1.15.0",