feat: add loading for fetch module transforms

Author: webfansplz

packages/devtools/src/app/components/flowmap/ModuleFlow.vue

@@ -7,6 +7,7 @@ import PluginName from '../display/PluginName.vue'
 const props = defineProps<{
   info: ModuleInfo
   session: SessionContext
+  transformsLoading: boolean
 }>()
 const { info } = toRefs(props)
 
@@ -246,7 +247,8 @@ const codeDisplay = computed(() => {
         >
           <template #node>
             <div i-ph-magic-wand-duotone /> Transform
-            <span op50 text-xs>({{ info.transforms.length }})</span>
+            <span v-if="transformsLoading" i-ph-spinner animate-spin />
+            <span v-else op50 text-xs>({{ info.transforms.length }})</span>
           </template>
           <template #container>
             <div>

packages/devtools/src/app/components/flowmap/ModuleFlowLoader.vue

@@ -11,14 +11,17 @@ const props = defineProps<{
 
 const rpc = useRpc()
 const transforms = ref<RolldownModuleTransformInfo[]>([])
+const transformsLoading = ref(false)
 watchEffect(async () => {
   const arg = {
     session: props.session.id,
     module: props.module,
   }
   // fetch transforms in the next tick to avoid race conditions with module info
   nextTick(async () => {
+    transformsLoading.value = true
     transforms.value = await rpc.value!['vite:rolldown:get-module-transforms']?.(arg)
+    transformsLoading.value = false
   })
 })
 
@@ -41,6 +44,7 @@ const info = computedAsync(async () => {
         p4
         :info
         :session
+        :transforms-loading
       />
       <ChartModuleFlamegraph
         :info