feat(tracing): skeleton and reactivity fix

packages/core/tracing/sandbox/pages/TraceViewerPage.vue

@@ -4,32 +4,55 @@
     @click="slideoutVisible = true"
   >
     <div>
-      Click to show the slideout
+      Click anywhere to show the slideout<br>
+      Slideout overlay is OFF (not a bug)<br>
+      Click the close button to dismiss the slideout (not a bug)<br>
     </div>
   </div>
 
   <KSlideout
     class="trace-viewer-slideout"
+    :close-on-blur="false"
+    :has-overlay="false"
     max-width="min(100%, 1020px)"
     :visible="slideoutVisible"
     @close="slideoutVisible = false"
   >
     <template #title>
-      <KBadge appearance="success">
-        200
-      </KBadge>
+      <template v-if="skeleton">
+        <KSkeletonBox
+          height="2"
+          width="50"
+        />
+      </template>
+      <template v-else>
+        <KBadge appearance="success">
+          200
+        </KBadge>
 
-      <div class="trace-viewer-title-request-line">
-        GET /kong
-      </div>
+        <div class="trace-viewer-title-request-line">
+          GET /kong
+        </div>
+      </template>
     </template>
 
     <TraceViewer
       :config="config"
       :root-span="spanRoots[0]"
+      :skeleton="skeleton"
       :url="url"
     />
   </KSlideout>
+
+  <KCard
+    class="controls"
+    title="Controls"
+  >
+    <KInputSwitch
+      v-model="skeleton"
+      label="Skeleton"
+    />
+  </KCard>
 </template>
 
 <script setup lang="ts">
@@ -42,6 +65,7 @@ const controlPlaneId = import.meta.env.VITE_KONNECT_CONTROL_PLANE_ID || ''
 
 const spanRoots = computed(() => buildSpanTrees(rawSpans))
 // const spanRoots = computed(() => buildSpanTrees(mergeSpansInTraceBatches(traceBatches)))
+const skeleton = ref(false)
 const slideoutVisible = ref(false)
 
 const config: TraceViewerConfig = {
@@ -69,10 +93,7 @@ const url = `https://example.com${path}`
   left: 0;
   width: 100dvw;
   height: 100dvh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  padding: 16px;
 }
 
 .trace-viewer-slideout {
@@ -88,6 +109,7 @@ const url = `https://example.com${path}`
     .slideout-title {
       flex-shrink: 1;
       min-width: 0;
+      height: $kui-line-height-50;
     }
 
     .slideout-content {
@@ -96,3 +118,14 @@ const url = `https://example.com${path}`
   }
 }
 </style>
+
+<style lang="scss" scoped>
+.controls {
+  z-index: 10000;
+  bottom: 16px;
+  left: 16px;
+  margin-bottom: 16px;
+  position: fixed;
+  width: auto;
+}
+</style>

packages/core/tracing/sandbox/pages/WaterfallPage.vue

@@ -1,15 +1,33 @@
 <template>
+  <KCard
+    class="controls"
+    title="Controls"
+  >
+    <KInputSwitch
+      v-model="skeleton"
+      label="Skeleton"
+    />
+  </KCard>
+
   <WaterfallView
     v-for="(root, i) in spanRoots"
     :key="i"
     :root-span="root"
+    :skeleton="skeleton"
   />
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { buildSpanTrees, WaterfallView } from '../../src'
 import rawSpans from '../fixtures/spans.json'
 
+const skeleton = ref(false)
 const spanRoots = computed(() => buildSpanTrees(rawSpans))
 </script>
+
+<style lang="scss" scoped>
+.controls {
+  margin-bottom: 16px;
+}
+</style>

packages/core/tracing/src/components/trace-viewer/TraceViewer.vue

@@ -8,29 +8,42 @@
       min-size="20"
     >
       <div class="above-waterfall">
-        <WaterfallLegend />
-
-        <div
-          v-if="url"
-          class="url"
-        >
-          <div class="label">
-            {{ t('trace_viewer.url') }}
-          </div>
-          <div class="content">
-            <KCopy
-              copy-tooltip="Copy"
-              :text="url"
-              truncate
-              :truncation-limit="48"
-            />
+        <template v-if="skeleton">
+          <KSkeletonBox
+            height="2"
+            width="25"
+          />
+          <KSkeletonBox
+            height="2"
+            width="25"
+          />
+        </template>
+        <template v-else>
+          <WaterfallLegend />
+
+          <div
+            v-if="url"
+            class="url"
+          >
+            <div class="label">
+              {{ t('trace_viewer.url') }}
+            </div>
+            <div class="content">
+              <KCopy
+                copy-tooltip="Copy"
+                :text="url"
+                truncate
+                :truncation-limit="48"
+              />
+            </div>
           </div>
-        </div>
+        </template>
       </div>
 
       <div class="waterfall-wrapper">
         <WaterfallView
           :root-span="props.rootSpan"
+          :skeleton="props.skeleton"
           @update:selected-span="handleUpdateSelectedSpan"
         />
       </div>
@@ -40,8 +53,15 @@
       class="detail-pane"
       size="50"
     >
+      <template v-if="skeleton">
+        <KSkeleton
+          :table-columns="2"
+          :table-rows="8"
+          type="table"
+        />
+      </template>
       <div
-        v-if="selectedSpan && !spanNothingToDisplay"
+        v-else-if="selectedSpan && !spanNothingToDisplay"
         class="span-details"
       >
         <SpanEventList
@@ -85,8 +105,9 @@ const { i18n: { t } } = composables.useI18n()
 
 const props = defineProps<{
   config: TraceViewerConfig
-  rootSpan: SpanNode
+  rootSpan?: SpanNode
   url?: string
+  skeleton?: boolean
 }>()
 
 // Provide the config to all children components

packages/core/tracing/src/components/waterfall/WaterfallView.vue

@@ -1,5 +1,17 @@
 <template>
-  <div class="waterfall">
+  <div
+    v-if="skeleton"
+    class="waterfall-skeleton"
+  >
+    <KSkeleton
+      v-for="i in 4"
+      :key="i"
+    />
+  </div>
+  <div
+    v-else
+    class="waterfall"
+  >
     <div class="waterfall-sticky-header">
       <!-- RESERVED: ZOOMING
       <div class="waterfall-row">
@@ -95,6 +107,10 @@ const props = defineProps({
     type: Object as PropType<SpanNode>,
     default: () => undefined,
   },
+  skeleton: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits<{
@@ -140,8 +156,14 @@ const handleRowsAreaLeave = () => {
   rowsAreaGuideX.value = undefined
 }
 
-watch(() => props.rootSpan, (span) => {
-  config.selectedSpan = span
+watch(() => props.ticks, (ticks) => {
+  config.ticks = ticks
+}, { immediate: true })
+
+watch(() => props.rootSpan, (rootSpan) => {
+  config.selectedSpan = rootSpan
+  config.totalDurationNano = rootSpan?.durationNano ?? 0,
+  config.startTimeUnixNano = rootSpan ? BigInt(rootSpan.span.startTimeUnixNano) : 0n
 }, { immediate: true })
 
 watch(() => config.selectedSpan, (span) => {
@@ -235,6 +257,10 @@ watch(() => config.selectedSpan, (span) => {
 </script>
 
 <style lang="scss" scoped>
+.waterfall-skeleton {
+  padding: $kui-space-20 $kui-space-40;
+}
+
 .waterfall {
   box-sizing: border-box;
   height: 100%;