Enhance loading UX with better state separation and chart overlay (v0.1.5)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: stared

package.json

@@ -1,7 +1,7 @@
 {
   "name": "webr-ggplot2-demo",
   "private": true,
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -36,6 +36,7 @@ const currentCsvData = ref<CsvData | null>(null)
 const {
   isReady,
   isLoading,
+  isInitializing,
   loadingStatus,
   installedLibraries,
   messages,
@@ -46,6 +47,7 @@ const {
   executeCode,
   uploadCsvData,
   clearMessages,
+  clearConsoleMessages,
   toggleLibrary,
 } = useWebR()
 
@@ -66,7 +68,7 @@ const hasWarnings = computed(() => {
 
 const runCode = async () => {
   if (code.value.trim()) {
-    clearMessages() // Clear console and charts before running
+    clearConsoleMessages() // Clear console messages but keep charts visible
     await executeCode(code.value)
     lastExecutedCode.value = code.value
     
@@ -129,7 +131,7 @@ const handleExampleSelect = async (example: RExample) => {
         
         // Execute code after CSV is loaded
         if (example.code.trim()) {
-          clearMessages() // Clear console and charts before running
+          clearConsoleMessages() // Clear console messages but keep charts visible
           await executeCode(example.code)
           lastExecutedCode.value = example.code
           
@@ -151,7 +153,7 @@ const handleExampleSelect = async (example: RExample) => {
     
     // Execute code immediately for examples without CSV
     if (example.code.trim()) {
-      clearMessages() // Clear console and charts before running
+      clearConsoleMessages() // Clear console messages but keep charts visible
       await executeCode(example.code)
       lastExecutedCode.value = example.code
       
@@ -231,12 +233,12 @@ onMounted(async () => {
         <div class="toolbar-right">
           <WebRStatus 
             :is-ready="isReady" 
-            :is-loading="isLoading" 
+            :is-loading="isInitializing" 
             :loading-status="loadingStatus"
           />
           <LibrarySelector 
             :installed-libraries="installedLibraries" 
-            :is-loading="isLoading"
+            :is-loading="isInitializing"
             :package-versions="packageVersions"
             @toggle-library="toggleLibrary"
           />
@@ -289,7 +291,7 @@ onMounted(async () => {
             class="run-button"
             @click="runCode"
           >
-            {{ isLoading ? 'Running...' : 'Run Code' }}
+            {{ !isReady ? 'Waiting for WebR...' : isLoading ? 'Running...' : 'Run Code' }}
           </button>
           <div v-if="isReady && (webrVersion || rVersion)" class="runtime-versions">
             <span v-if="webrVersion">WebR {{ webrVersion }}</span>

src/components/OutputDisplay.vue

@@ -47,11 +47,6 @@ watch(
 <template>
   <div class="output-display">
     <div ref="outputRef" class="output-content">
-      <div v-if="isLoading" class="loading">
-        <div class="spinner"></div>
-        <span>Running R code...</span>
-      </div>
-      
       <div v-if="messages.length === 0 && !isLoading" class="empty-state">
         <p>Run some R code to see the output here</p>
       </div>
@@ -66,6 +61,14 @@ watch(
           @error="handlePlotError"
         />
       </div>
+      
+      <!-- Loading overlay -->
+      <div v-if="isLoading" class="loading-overlay">
+        <div class="loading-content">
+          <div class="spinner"></div>
+          <span>Executing R code...</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -85,19 +88,39 @@ watch(
   display: flex;
   flex-direction: column;
   min-height: 0;
+  position: relative;
 }
 
-.loading {
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.4);
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  color: #6b7280;
-  font-style: italic;
+  justify-content: center;
+  z-index: 10;
+  backdrop-filter: blur(1px);
+}
+
+.loading-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #374151;
+  font-weight: 500;
+  padding: 1rem 1.5rem;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.8);
 }
 
 .spinner {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   border: 2px solid #e5e7eb;
   border-top: 2px solid #3b82f6;
   border-radius: 50%;

src/composables/useWebR.ts

@@ -58,7 +58,8 @@ const extractContentFromWebROutput = async (output: WebROutputItem): Promise<str
 
 export const useWebR = () => {
   const isReady = ref(false)
-  const isLoading = ref(false)
+  const isLoading = ref(false) // For code execution
+  const isInitializing = ref(false) // For WebR initialization
   const loadingStatus = ref('')
   const installedLibraries = reactive(new Set<string>())
   const messages = reactive<WebRMessage[]>([])
@@ -71,7 +72,7 @@ export const useWebR = () => {
 
   const initializeWebR = async (initialCode?: string) => {
     try {
-      isLoading.value = true
+      isInitializing.value = true
       loadingStatus.value = 'Initializing WebR...'
 
       // Import WebR from installed package
@@ -118,7 +119,7 @@ export const useWebR = () => {
       loadingStatus.value = 'WebR Failed'
       addMessage('error', `Failed to initialize WebR: ${error}`)
     } finally {
-      isLoading.value = false
+      isInitializing.value = false
     }
   }
 
@@ -130,6 +131,15 @@ export const useWebR = () => {
     messages.splice(0, messages.length)
   }
 
+  const clearConsoleMessages = () => {
+    // Remove only non-plot messages, keep charts visible during execution
+    for (let i = messages.length - 1; i >= 0; i--) {
+      if (messages[i].type !== 'plot') {
+        messages.splice(i, 1)
+      }
+    }
+  }
+
   const executeCode = async (code: string) => {
     if (!webR || !isReady.value) {
       addMessage('error', 'WebR is not ready. Please wait for initialization.')
@@ -227,7 +237,7 @@ export const useWebR = () => {
     try {
       if (install) {
         loadingStatus.value = `Installing ${library}...`
-        isLoading.value = true
+        isInitializing.value = true
         await webR.installPackages([library])
         installedLibraries.add(library)
         addMessage('success', `${library} installed successfully`)
@@ -239,7 +249,7 @@ export const useWebR = () => {
     } catch (error) {
       addMessage('error', `Failed to install ${library}: ${error}`)
     } finally {
-      isLoading.value = false
+      isInitializing.value = false
       loadingStatus.value = isReady.value ? 'WebR Ready' : loadingStatus.value
     }
   }
@@ -289,6 +299,7 @@ export const useWebR = () => {
   return {
     isReady,
     isLoading,
+    isInitializing,
     loadingStatus,
     installedLibraries,
     messages,
@@ -299,6 +310,7 @@ export const useWebR = () => {
     executeCode,
     uploadCsvData,
     clearMessages,
+    clearConsoleMessages,
     toggleLibrary,
   }
 }