frontend: polish app launch and release experience

neode-ui/src/views/web5/Web5DWN.vue

@@ -119,9 +119,16 @@
         </button>
       </div>
       <div v-if="showDwnMessages">
-        <div v-if="loadingDwnMessages" class="text-xs text-white/40 py-4 text-center">Loading messages...</div>
+        <div v-if="loadingDwnMessages && dwnMessages.length === 0" class="text-xs text-white/40 py-4 text-center">Loading messages...</div>
         <div v-else-if="dwnMessages.length === 0" class="text-xs text-white/30 italic py-2">No messages stored</div>
         <div v-else class="space-y-2 max-h-64 overflow-y-auto">
+          <div v-if="loadingDwnMessages" class="p-2 text-center text-white/45 text-xs flex items-center justify-center gap-2">
+            <svg class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            Refreshing messages...
+          </div>
           <div v-for="msg in dwnMessages" :key="msg.record_id" class="bg-white/5 rounded-lg p-3">
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs font-mono text-white/50 truncate max-w-[200px]" :title="msg.record_id">{{ (msg.record_id || '').slice(0, 8) }}...</span>
@@ -261,16 +268,17 @@ async function toggleDwnMessages() {
 }
 
 async function loadDwnMessages() {
+  const hadMessages = dwnMessages.value.length > 0
   loadingDwnMessages.value = true
   try {
     const res = await rpcClient.call<{ messages: DwnMessageEntry[]; count: number }>({ method: 'dwn.query-messages', params: { limit: 50 } })
     dwnMessages.value = res.messages || []
   } catch {
-    dwnMessages.value = []
+    if (!hadMessages) dwnMessages.value = []
   } finally {
     loadingDwnMessages.value = false
   }
 }
 
-defineExpose({ loadDwnStatus, loadDwnProtocols })
+defineExpose({ loadDwnStatus, loadDwnProtocols, loadDwnMessages, dwnMessages, showDwnMessages })
 </script>