fix(browser): add loading state

Author: CyanSalt

addons/browser/package.json

@@ -15,5 +15,8 @@
       "productName": "浏览器",
       "description": "网上冲浪"
     }
+  },
+  "devDependencies": {
+    "normalize-url": "^8.0.1"
   }
 }

addons/browser/src/renderer/BrowserPane.vue

@@ -2,6 +2,7 @@
 import type { TerminalTab } from '@commas/types/terminal'
 import * as commas from 'commas:api/renderer'
 import { shell } from 'electron'
+import normalizeURL from 'normalize-url'
 import { nextTick, watchEffect } from 'vue'
 
 const { tab } = defineProps<{
@@ -58,8 +59,16 @@ async function startCustomization() {
 }
 
 async function customize() {
-  if (customURL !== url) {
-    url = customURL
+  if (customURL && customURL !== url) {
+    url = normalizeURL(customURL, {
+      defaultProtocol: 'https',
+      stripTextFragment: false,
+      stripWWW: false,
+      removeQueryParameters: false,
+      removeTrailingSlash: false,
+      removeSingleSlash: false,
+      sortQueryParameters: false,
+    })
   }
   isCustomizing = false
 }
@@ -95,7 +104,7 @@ watchEffect((onInvalidate) => {
 <template>
   <TerminalPane :tab="tab" class="browser-pane">
     <div class="browser-view">
-      <div class="form-line action-line">
+      <div :class="['form-line', 'action-line', { 'is-loading': view?.loading }]">
         <span :class="['link', 'form-action', { disabled: !view?.canGoBack }]" @click="goBack">
           <VisualIcon name="lucide-undo-2" />
         </span>
@@ -134,10 +143,20 @@ watchEffect((onInvalidate) => {
   padding: 0;
   overflow: visible;
 }
+@keyframes background-continuous {
+  from {
+    background-position: right;
+  }
+}
 .action-line {
   flex: none;
   gap: 4px;
   padding: 8px;
+  &.is-loading {
+    background: linear-gradient(to right, transparent 25%, var(--design-highlight-background), transparent 66.6667%);
+    background-size: 300% 100%;
+    animation: background-continuous 1s infinite linear;
+  }
   .form-action {
     width: 18px;
     height: 18px;

package-lock.json

@@ -49,6 +49,7 @@ declare module '@commas/electron-ipc' {
     'view-title-updated': (id: number, title: string) => void,
     'view-icon-updated': (id: number, icon: string | undefined) => void,
     'view-url-updated': (id: number, url: string, canGoBack: boolean) => void,
+    'view-loading-updated': (id: number, loading: boolean) => void,
     'view-open-url': (url: string) => void,
   }
 }
@@ -287,6 +288,12 @@ function handleViewEvents(view: WebContentsView, parent: WebContents) {
   view.webContents.on('did-start-navigation', (details) => {
     send(parent, 'view-url-updated', view.webContents.id, details.url, view.webContents.navigationHistory.canGoBack())
   })
+  view.webContents.on('did-start-loading', () => {
+    send(parent, 'view-loading-updated', view.webContents.id, true)
+  })
+  view.webContents.on('did-stop-loading', () => {
+    send(parent, 'view-loading-updated', view.webContents.id, false)
+  })
 }
 
 export {

src/main/lib/message.ts

@@ -12,6 +12,7 @@ export class RendererWebContentsView {
   url?: string
   title?: string
   icon?: string
+  loading?: boolean
   canGoBack?: boolean
 
   constructor(id: number) {
@@ -80,6 +81,11 @@ export function handleWebContentsMessages() {
     view.url = url
     view.canGoBack = canGoBack
   })
+  ipcRenderer.on('view-loading-updated', (event, id, loading) => {
+    const view = webContentsViews.find(item => item.id === id)
+    if (!view) return
+    view.loading = loading
+  })
   ipcRenderer.on('view-open-url', (event, url) => {
     openURL(url)
   })