feat: version tag (#14949)

web/app/components/workflow/panel/version-history-panel/loading/index.tsx

@@ -0,0 +1,19 @@
+import Item from './item'
+
+const itemConfig = Array.from({ length: 8 }).map((_, index) => {
+  return {
+    isFirst: index === 0,
+    isLast: index === 7,
+    titleWidth: (index + 1) % 2 === 0 ? 'w-1/3' : 'w-2/5',
+    releaseNotesWidth: (index + 1) % 2 === 0 ? 'w-3/4' : 'w-4/6',
+  }
+})
+
+const Loading = () => {
+  return <div className='relative w-full overflow-y-hidden'>
+    <div className='absolute z-10 top-0 left-0 w-full h-full bg-dataset-chunk-list-mask-bg' />
+    {itemConfig.map((config, index) => <Item key={index} {...config} />)}
+  </div>
+}
+
+export default Loading

web/app/components/workflow/panel/version-history-panel/loading/item.tsx

@@ -0,0 +1,40 @@
+import React, { type FC } from 'react'
+import cn from '@/utils/classnames'
+
+type ItemProps = {
+  titleWidth: string
+  releaseNotesWidth: string
+  isFirst: boolean
+  isLast: boolean
+}
+
+const Item: FC<ItemProps> = ({
+  titleWidth,
+  releaseNotesWidth,
+  isFirst,
+  isLast,
+}) => {
+  return (
+    <div className='flex gap-x-1 relative p-2' >
+      {!isLast && <div className='absolute w-0.5 h-[calc(100%-0.75rem)] left-4 top-6 bg-divider-subtle' />}
+      <div className=' flex items-center justify-center shrink-0 w-[18px] h-5'>
+        <div className='w-2 h-2 border-[2px] rounded-lg border-text-quaternary' />
+      </div>
+      <div className='flex flex-col grow gap-y-0.5'>
+        <div className='flex items-center h-3.5'>
+          <div className={cn('h-2 w-full bg-text-quaternary rounded-sm opacity-20', titleWidth)} />
+        </div>
+        {
+          !isFirst && (
+            <div className='flex items-center h-3'>
+              <div className={cn('h-1.5 w-full bg-text-quaternary rounded-sm opacity-20', releaseNotesWidth)} />
+            </div>
+          )
+        }
+      </div>
+    </div>
+
+  )
+}
+
+export default React.memo(Item)