Radius/add network structure

public/plugins/vue/tt-core/components/feedback/TtLoadingIndicator.js

@@ -0,0 +1,63 @@
+/**
+ * TtLoadingIndicator - Processing indicator with progress (Vue 3)
+ * Displays loading state with animated icon and progress bar
+ */
+
+const TtLoadingIndicator = {
+    name: 'TtLoadingIndicator',
+    props: {
+        progress: {
+            type: Number,
+            default: 0,
+            validator: (value) => value >= 0 && value <= 100
+        },
+        currentRow: {
+            type: Number,
+            default: 0
+        },
+        totalRows: {
+            type: Number,
+            default: 0
+        },
+        currentItem: {
+            type: String,
+            default: ''
+        },
+        title: {
+            type: String,
+            default: 'Verarbeitung läuft...'
+        },
+        icon: {
+            type: String,
+            default: 'fa-duotone fa-hourglass-half'
+        }
+    },
+    template: `
+        <div class="tt-scope table-placeholder">
+            <i
+                :class="[icon, 'animated-hourglass']"
+                style="font-size: 36px; margin-bottom: 10px; color: var(--tt-brand-blue);"
+            ></i>
+            <div class="h5">{{ title }}</div>
+            <slot name="description">
+                <p v-if="currentItem" class="muted small">
+                    Aktuell: {{ currentItem }}
+                </p>
+            </slot>
+            <div
+                class="progress-bar mt-3"
+                style="width: 250px; margin-left: auto; margin-right: auto;"
+            >
+                <div class="bar" :style="{width: progress + '%'}"></div>
+            </div>
+            <div v-if="totalRows > 0" class="muted small mt-2">
+                Verarbeite Zeile {{ currentRow + 1 }} von {{ totalRows }}
+            </div>
+        </div>
+    `
+};
+
+// Register component globally if Vue 3 app instance is available
+if (window.VueApp) {
+    window.VueApp.component('tt-loading-indicator', TtLoadingIndicator);
+}

public/plugins/vue/tt-core/components/feedback/TtSkeleton.js

@@ -0,0 +1,50 @@
+/**
+ * TtSkeleton - Skeleton loader component (Vue 3)
+ * Displays animated loading skeleton
+ */
+
+const TtSkeleton = {
+    name: 'TtSkeleton',
+    props: {
+        width: {
+            type: String,
+            default: '100%'
+        },
+        height: {
+            type: String,
+            default: '12px'
+        },
+        borderRadius: {
+            type: String,
+            default: '8px'
+        },
+        count: {
+            type: Number,
+            default: 1
+        },
+        spacing: {
+            type: String,
+            default: '8px'
+        }
+    },
+    template: `
+        <div class="tt-scope">
+            <div
+                v-for="n in count"
+                :key="n"
+                class="skeleton-line"
+                :style="{
+                    width: width,
+                    '--h': height,
+                    borderRadius: borderRadius,
+                    marginBottom: n < count ? spacing : '0'
+                }"
+            ></div>
+        </div>
+    `
+};
+
+// Register component globally if Vue 3 app instance is available
+if (window.VueApp) {
+    window.VueApp.component('tt-skeleton', TtSkeleton);
+}