From aaa68f98ce69034828111d241411d3281605cced Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 22:58:48 +0530
Subject: [PATCH 1/3] fix(ui): skeletons based on type like for chart and
 table.

---
 ui/src/components/dashboard/Dashboard.vue     |  75 ++++---
 .../components/charts/executions/Bar.vue      |  11 +-
 .../components/charts/executions/BarChart.vue |  60 +++++-
 .../components/charts/executions/Doughnut.vue |  43 +++-
 .../dashboard/components/charts/logs/Bar.vue  |  59 +++++-
 .../tables/executions/EmptyNextScheduled.vue  | 185 +++++++++++++++++-
 .../tables/executions/InProgress.vue          |  42 +++-
 .../tables/executions/NextScheduled.vue       |  50 ++++-
 ui/src/components/executions/Executions.vue   |  12 +-
 ui/src/components/flows/Flows.vue             |   9 +-
 ui/src/components/logs/LogsWrapper.vue        |   2 +-
 11 files changed, 496 insertions(+), 52 deletions(-)

diff --git a/ui/src/components/dashboard/Dashboard.vue b/ui/src/components/dashboard/Dashboard.vue
index 37cfc668383..53de0211720 100644
--- a/ui/src/components/dashboard/Dashboard.vue
+++ b/ui/src/components/dashboard/Dashboard.vue
@@ -131,12 +131,14 @@
         <ExecutionsBar
             :data="graphData"
             :total="stats.total"
+            :loading="executionsLoading"
             class="card card-2/3"
         />
 
         <ExecutionsDoughnut
             :data="graphData"
             :total="stats.total"
+            :loading="executionsLoading"
             class="card card-1/3"
         />
 
@@ -169,6 +171,7 @@
             v-else
             :flow="props.flowId"
             :namespace="props.namespace"
+            :loading="executionsLoading"
             class="card card-1/2"
         />
 
@@ -176,23 +179,34 @@
             v-if="props.flow"
             :flow="props.flowId"
             :namespace="props.namespace"
+            :loading="executionsLoading"
             class="card card-1/2"
         />
         <ExecutionsNextScheduled
             v-else-if="isAllowedTriggers"
             :flow="props.flowId"
             :namespace="props.namespace"
+            :loading="executionsLoading"
             class="card card-1/2"
         />
 
-        <ExecutionsEmptyNextScheduled v-else class="card card-1/2" />
+        <ExecutionsEmptyNextScheduled 
+            v-else 
+            :loading="executionsLoading"
+            class="card card-1/2" 
+        />
         <ExecutionsNamespace
             v-if="!props.flow && Object.keys(namespaceExecutions).length > 1"
             class="card card-1"
             :data="namespaceExecutions"
             :total="stats.total"
         />
-        <Logs v-if="!props.flow" :data="logs" class="card card-1" />
+        <Logs 
+            v-if="!props.flow" 
+            :data="logs" 
+            :loading="executionsLoading"
+            class="card card-1" 
+        />
     </div>
 </template>
 
@@ -403,20 +417,22 @@
     const fetchExecutions = () => {
         executionsLoading.value = true;
 
-        store.dispatch("stat/daily", mergeQuery()).then((response) => {
-            const sorted = response.sort(
-                (a, b) => new Date(b.date) - new Date(a.date),
-            );
-
-            executions.value = {
-                raw: sorted,
-                all: transformer(sorted),
-                yesterday: sorted.at(-2),
-                today: sorted.at(-1),
-            };
-        }).finally(() => {
-            executionsLoading.value = false;
-        });
+        return store.dispatch("stat/daily", mergeQuery())
+            .then((response) => {
+                const sorted = response.sort(
+                    (a, b) => new Date(b.date) - new Date(a.date),
+                );
+
+                executions.value = {
+                    raw: sorted,
+                    all: transformer(sorted),
+                    yesterday: sorted.at(-2),
+                    today: sorted.at(-1),
+                };
+            })
+            .finally(() => {
+                executionsLoading.value = false;
+            });
     };
 
     const graphData = computed(() => store.state.stat.daily || []);
@@ -453,14 +469,25 @@
 
         if (!custom.value.shown) {
             try {
-                await Promise.any([
-                    fetchNumbers(),
-                    fetchExecutions(),
-                    fetchNamespaceExecutions(),
-                    fetchLogs(),
-                ]);
-            } catch (error) {
-                console.error("All promises failed:", error);
+                executionsLoading.value = true;
+                await new Promise((resolve) => {
+                    setTimeout(async () => {
+                        try {
+                            await Promise.any([
+                                fetchNumbers(),
+                                fetchExecutions(),
+                                fetchNamespaceExecutions(),
+                                fetchLogs(),
+                            ]);
+                            resolve();
+                        } catch (error) {
+                            console.error("All promises failed:", error);
+                            resolve();
+                        }
+                    }, 1000); // 1 second delay - please remove this after testing.
+                });
+            } finally {
+                executionsLoading.value = false;
             }
         }
     };
diff --git a/ui/src/components/dashboard/components/charts/executions/Bar.vue b/ui/src/components/dashboard/components/charts/executions/Bar.vue
index bdda0294c2e..9e190143f55 100644
--- a/ui/src/components/dashboard/components/charts/executions/Bar.vue
+++ b/ui/src/components/dashboard/components/charts/executions/Bar.vue
@@ -11,7 +11,8 @@
                     </span>
                 </p>
                 <p class="m-0 fs-2">
-                    {{ total }}
+                    <el-skeleton v-if="loading" :rows="0" />
+                    <span v-else>{{ total }}</span>
                 </p>
             </div>
 
@@ -23,6 +24,7 @@
                         v-model="duration"
                         :active-icon="CheckIcon"
                         inline-prompt
+                        :disabled="loading"
                     />
                     <span class="d-flex align-items-center ps-2 fw-light small">{{ t("duration") }}</span>
                 </div>
@@ -31,12 +33,13 @@
         </div>
 
         <BarChart
-            v-if="total > 0"
+            v-if="total > 0 || loading"
             :data="data"
             :total="total"
             :duration="duration"
             :plugins="[barLegend]"
             :small="isSmallScreen"
+            :loading="loading"
             class="tall"
         />
 
@@ -71,6 +74,10 @@
             type: Number,
             required: true,
         },
+        loading: {
+            type: Boolean,
+            default: false
+        }
     });
 </script>
 
diff --git a/ui/src/components/dashboard/components/charts/executions/BarChart.vue b/ui/src/components/dashboard/components/charts/executions/BarChart.vue
index 72957367f80..2c31d98300a 100644
--- a/ui/src/components/dashboard/components/charts/executions/BarChart.vue
+++ b/ui/src/components/dashboard/components/charts/executions/BarChart.vue
@@ -12,6 +12,13 @@
     >
         <div>
             <Bar
+                v-if="loading"
+                :class="small ? 'small' : ''"
+                :data="skeletonData"
+                :options="skeletonOptions"
+            />
+            <Bar
+                v-else
                 :class="small ? 'small' : ''"
                 :data="parsedData"
                 :options="options"
@@ -66,6 +73,10 @@
             type: Boolean,
             default: false,
         },
+        loading: {
+            type: Boolean,
+            default: false
+        }
     });
 
     const theme = useTheme()
@@ -73,6 +84,51 @@
 
     const tooltipContent = ref("")
 
+    const skeletonData = computed(() => {
+        const barColor = theme.value === "dark" 
+            ? "rgba(255, 255, 255, 0.08)"
+            : "rgba(0, 0, 0, 0.06)";
+
+        return {
+            labels: Array(18).fill(""),
+            datasets: [{
+                data: Array(18).fill(0).map(() => Math.random() * 70 + 30),
+                backgroundColor: barColor,
+                borderRadius: 2,
+                barThickness: props.small ? 8 : 12,
+            }]
+        };
+    });
+
+    const skeletonOptions = computed(() => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            },
+            tooltip: {
+                enabled: false
+            }
+        },
+        scales: {
+            x: {
+                display: false,
+                grid: {
+                    display: false
+                }
+            },
+            y: {
+                display: false,
+                grid: {
+                    display: false
+                },
+                min: 0,
+                max: 100
+            }
+        }
+    }));
+
     const parsedData = computed(() => {
         let datasets = props.data.reduce(function (accumulator, value) {
             Object.keys(value.executionCounts).forEach(function (state) {
@@ -234,8 +290,8 @@
     );
 </script>
 
-<style>
-.small{
+<style lang="scss" scoped>
+.small {
     height: 40px;
 }
 </style>
\ No newline at end of file
diff --git a/ui/src/components/dashboard/components/charts/executions/Doughnut.vue b/ui/src/components/dashboard/components/charts/executions/Doughnut.vue
index 4cb219e00a6..ec76b532bf7 100644
--- a/ui/src/components/dashboard/components/charts/executions/Doughnut.vue
+++ b/ui/src/components/dashboard/components/charts/executions/Doughnut.vue
@@ -9,7 +9,13 @@
         >
             <div class="w-75">
                 <Doughnut
-                    v-if="total > 0"
+                    v-if="loading"
+                    :data="skeletonData"
+                    :options="skeletonOptions"
+                    class="tall"
+                />
+                <Doughnut
+                    v-else-if="total > 0"
                     :data="parsedData"
                     :options="options"
                     :plugins="[totalsLegend, centerPlugin, thicknessPlugin]"
@@ -50,6 +56,10 @@
             type: Number,
             required: true,
         },
+        loading: {
+            type: Boolean,
+            default: false
+        }
     });
 
     const theme = useTheme();
@@ -82,8 +92,6 @@
         };
     });
 
-
-
     const options = computed(() =>
         defaultConfig({
             plugins: {
@@ -161,6 +169,35 @@
             });
         },
     };
+
+    const skeletonData = computed(() => {
+        const barColor = theme.value === "dark" 
+            ? "rgba(255, 255, 255, 0.08)"
+            : "rgba(0, 0, 0, 0.06)";
+
+        return {
+            labels: ["Loading"],
+            datasets: [{
+                data: [100],
+                backgroundColor: [barColor],
+                borderWidth: 0
+            }]
+        };
+    });
+
+    const skeletonOptions = computed(() => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            },
+            tooltip: {
+                enabled: false
+            }
+        },
+        cutout: "40%"
+    }));
 </script>
 
 <style lang="scss" scoped>
diff --git a/ui/src/components/dashboard/components/charts/logs/Bar.vue b/ui/src/components/dashboard/components/charts/logs/Bar.vue
index 401c2f09754..4c2ff754e51 100644
--- a/ui/src/components/dashboard/components/charts/logs/Bar.vue
+++ b/ui/src/components/dashboard/components/charts/logs/Bar.vue
@@ -13,7 +13,13 @@
         </div>
 
         <Bar
-            v-if="props.data.length > 0"
+            v-if="loading"
+            :data="skeletonData"
+            :options="skeletonOptions"
+            class="tall"
+        />
+        <Bar
+            v-else-if="props.data.length > 0"
             :data="parsedData"
             :options="options"
             :plugins="[barLegend]"
@@ -46,6 +52,10 @@
             type: Array,
             required: true,
         },
+        loading: {
+            type: Boolean,
+            default: false
+        }
     });
 
     const theme = useTheme();
@@ -142,6 +152,53 @@
             },
         }, theme.value),
     );
+
+    // Add skeleton data
+    const skeletonData = computed(() => {
+        const barColor = theme.value === "dark" 
+            ? "rgba(255, 255, 255, 0.08)"
+            : "rgba(0, 0, 0, 0.06)";
+
+        return {
+            labels: Array(18).fill(""),
+            datasets: [{
+                data: Array(18).fill(0).map(() => Math.random() * 70 + 30),
+                backgroundColor: barColor,
+                borderRadius: 2,
+                barThickness: 12,
+            }]
+        };
+    });
+
+    // Add skeleton options
+    const skeletonOptions = computed(() => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            },
+            tooltip: {
+                enabled: false
+            }
+        },
+        scales: {
+            x: {
+                display: false,
+                grid: {
+                    display: false
+                }
+            },
+            y: {
+                display: false,
+                grid: {
+                    display: false
+                },
+                min: 0,
+                max: 100
+            }
+        }
+    }));
 </script>
 
 <style lang="scss" scoped>
diff --git a/ui/src/components/dashboard/components/tables/executions/EmptyNextScheduled.vue b/ui/src/components/dashboard/components/tables/executions/EmptyNextScheduled.vue
index 455675b1aec..7d6126a8e77 100644
--- a/ui/src/components/dashboard/components/tables/executions/EmptyNextScheduled.vue
+++ b/ui/src/components/dashboard/components/tables/executions/EmptyNextScheduled.vue
@@ -1,19 +1,188 @@
 <template>
-    <div class="p-4 h-100">
-        <span class="fs-6 fw-bold">
-            {{ t("dashboard.next_scheduled_executions") }}
-        </span>
-
-        <div class="pt-4">
-            <span class="align-middle">
-                {{ t("dashboard.not_auth") }}
+    <div class="h-100 p-4">
+        <div class="d-flex justify-content-between align-items-center">
+            <span class="fs-6 fw-bold">
+                {{ t("dashboard.empty_next_scheduled") }}
             </span>
+            <RouterLink
+                :to="{name: 'admin/triggers'}"
+            >
+                <el-button type="primary" size="small" text>
+                    {{ t("dashboard.see_all") }}
+                </el-button>
+            </RouterLink>
         </div>
+
+        <div class="pt-4" v-if="loading">
+            <el-table :data="skeletonData" class="scheduled" :height="240">
+                <el-table-column :label="$t('namespace')">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 100%" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('flow')">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 100%" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('trigger')" width="100">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 80px" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('next')" width="120">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 100px" />
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <div class="pt-4" v-else-if="triggers.results.length">
+            <el-table
+                :data="triggers.results"
+                class="scheduled"
+                :height="240"
+            >
+                <el-table-column :label="$t('namespace')">
+                    <template #default="scope">
+                        <RouterLink
+                            :to="{
+                                name: 'namespaces/update',
+                                params: {
+                                    id: scope.row.namespace,
+                                },
+                            }"
+                        >
+                            <el-tooltip
+                                :content="scope.row.namespace"
+                                placement="right"
+                            >
+                                <span class="text-truncate">
+                                    {{ scope.row.namespace }}
+                                </span>
+                            </el-tooltip>
+                        </RouterLink>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('flow')">
+                    <template #default="scope">
+                        <RouterLink
+                            :to="{
+                                name: 'flows/update',
+                                params: {
+                                    namespace: scope.row.namespace,
+                                    id: scope.row.flowId,
+                                },
+                            }"
+                        >
+                            <el-tooltip
+                                :content="scope.row.flowId"
+                                placement="right"
+                            >
+                                <span class="text-truncate">
+                                    {{ scope.row.flowId }}
+                                </span>
+                            </el-tooltip>
+                        </RouterLink>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('trigger')" width="100">
+                    <template #default="scope">
+                        <el-tooltip
+                            :content="scope.row.triggerId"
+                            placement="right"
+                        >
+                            <span class="text-truncate">
+                                {{ scope.row.triggerId }}
+                            </span>
+                        </el-tooltip>
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('next')" width="120">
+                    <template #default="scope">
+                        <date-ago :date="scope.row.next" />
+                    </template>
+                </el-table-column>
+            </el-table>
+            <div class="d-flex justify-content-end">
+                <el-pagination
+                    v-model:current-page="currentPage"
+                    @current-change="loadTriggers"
+                    :total="triggers.total"
+                    layout="prev, pager, next, total"
+                    :page-size="5"
+                    size="small"
+                    class="pt-3"
+                />
+            </div>
+        </div>
+        <NoData v-else />
     </div>
 </template>
 
 <script setup>
+    import {onBeforeMount, ref} from "vue";
+    import {useStore} from "vuex";
     import {useI18n} from "vue-i18n";
 
+    import NoData from "../../../../layout/NoData.vue";
+    import DateAgo from "../../../../layout/DateAgo.vue";
+
+    import {RouterLink} from "vue-router";
+
+    const props = defineProps({
+        flow: {
+            type: String,
+            required: false,
+            default: null,
+        },
+        namespace: {
+            type: String,
+            required: false,
+            default: null,
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    });
+
+    const store = useStore();
     const {t} = useI18n({useScope: "global"});
+
+    const triggers = ref({results: [], total: 0});
+    const currentPage = ref(1);
+
+    const skeletonData = Array(5).fill({});
+
+    const loadTriggers = (page = 1) => {
+        store
+            .dispatch("trigger/findTriggers", {
+                namespace: props.namespace,
+                flowId: props.flow,
+                size: 5,
+                page,
+                sort: "next:asc",
+                emptyNext: true,
+            })
+            .then((response) => {
+                if (!response) return;
+                triggers.value = response;
+            });
+    };
+
+    onBeforeMount(() => {
+        loadTriggers();
+    });
 </script>
+
+<style lang="scss" scoped>
+.scheduled {
+    background: var(--ks-background-table-row);
+}
+
+:deep(.el-skeleton-item) {
+    background: var(--ks-background-skeleton);
+}
+</style>
diff --git a/ui/src/components/dashboard/components/tables/executions/InProgress.vue b/ui/src/components/dashboard/components/tables/executions/InProgress.vue
index 9e514e9805b..5648600a7ed 100644
--- a/ui/src/components/dashboard/components/tables/executions/InProgress.vue
+++ b/ui/src/components/dashboard/components/tables/executions/InProgress.vue
@@ -22,7 +22,37 @@
             </RouterLink>
         </div>
 
-        <div class="pt-4" v-if="executions.results.length">
+        <div class="pt-4" v-if="loading">
+            <el-table :data="skeletonData" class="inprogress" :height="240">
+                <el-table-column :label="$t('dashboard.id')" width="80">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 60px" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('namespace')">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 100%" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('flow')">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 100%" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('duration')" width="100">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 60px" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('state')">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 80px" />
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <div class="pt-4" v-else-if="executions.results.length">
             <el-table
                 :data="executions.results"
                 class="inprogress"
@@ -148,6 +178,10 @@
             required: false,
             default: null,
         },
+        loading: {
+            type: Boolean,
+            default: false
+        }
     });
 
     const store = useStore();
@@ -156,6 +190,8 @@
     const executions = ref({results: [], total: 0});
     const currentPage = ref(1);
 
+    const skeletonData = Array(5).fill({});
+
     const loadExecutions = (page = 1) => {
         store
             .dispatch("execution/findExecutions", {
@@ -190,4 +226,8 @@ code {
 .inprogress {
     background: var(--ks-background-table-row);
 }
+
+:deep(.el-skeleton-item) {
+    background: var(--ks-background-skeleton);
+}
 </style>
diff --git a/ui/src/components/dashboard/components/tables/executions/NextScheduled.vue b/ui/src/components/dashboard/components/tables/executions/NextScheduled.vue
index ba776495f11..cbcf0b7294b 100644
--- a/ui/src/components/dashboard/components/tables/executions/NextScheduled.vue
+++ b/ui/src/components/dashboard/components/tables/executions/NextScheduled.vue
@@ -1,17 +1,44 @@
 <template>
-    <div class="p-4 h-100">
+    <div class="h-100 p-4">
         <div class="d-flex justify-content-between align-items-center">
             <span class="fs-6 fw-bold">
                 {{ t("dashboard.next_scheduled_executions") }}
             </span>
-            <RouterLink :to="{name: 'admin/triggers'}">
+            <RouterLink
+                :to="{name: 'admin/triggers'}"
+            >
                 <el-button type="primary" size="small" text>
                     {{ t("dashboard.see_all") }}
                 </el-button>
             </RouterLink>
         </div>
 
-        <div class="pt-4" v-if="executions.results.length">
+        <div class="pt-4" v-if="loading">
+            <el-table :data="skeletonData" class="scheduled" :height="240">
+                <el-table-column :label="$t('namespace')">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 100%" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('flow')">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 100%" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('trigger')" width="100">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 80px" />
+                    </template>
+                </el-table-column>
+                <el-table-column :label="$t('next')" width="120">
+                    <template #default>
+                        <el-skeleton-item variant="text" style="width: 100px" />
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+
+        <div class="pt-4" v-else-if="executions.results.length">
             <el-table
                 :data="executions.results"
                 class="nextscheduled"
@@ -47,7 +74,7 @@
                         />
                     </template>
                 </el-table-column>
-                <el-table-column :label="$t('dashboard.id')" width="100">
+                <el-table-column :label="$t('id')" width="100">
                     <template #default="scope">
                         <RouterLink :to="{name: 'admin/triggers'}">
                             <el-tooltip
@@ -105,10 +132,9 @@
                         </RouterLink>
                     </template>
                 </el-table-column>
-                <el-table-column :label="$t('dashboard.next_execution_date')">
+                <el-table-column :label="$t('next')" width="120">
                     <template #default="scope">
-                        <date-ago v-if="!scope.row.disabled" :date="scope.row.triggerContext.nextExecutionDate" />
-                        <span v-else>-</span>
+                        <date-ago :date="scope.row.triggerContext.nextExecutionDate" />
                     </template>
                 </el-table-column>
             </el-table>
@@ -150,6 +176,10 @@
             required: false,
             default: null,
         },
+        loading: {
+            type: Boolean,
+            default: false
+        }
     });
 
     const store = useStore();
@@ -158,6 +188,8 @@
     const executions = ref({results: [], total: 0});
     const currentPage = ref(1);
 
+    const skeletonData = Array(5).fill({});
+
     const loadExecutions = (page = 1) => {
         store
             .dispatch("trigger/search", {
@@ -215,4 +247,8 @@ code {
 .next-toggle {
     padding: 8px 0 0 0 !important;
 }
+
+:deep(.el-skeleton-item) {
+    background: var(--ks-background-skeleton);
+}
 </style>
diff --git a/ui/src/components/executions/Executions.vue b/ui/src/components/executions/Executions.vue
index 76e524e8108..75041afcd0d 100644
--- a/ui/src/components/executions/Executions.vue
+++ b/ui/src/components/executions/Executions.vue
@@ -59,7 +59,12 @@
 
             <template #top>
                 <el-card v-if="showStatChart()" class="mb-4 shadow">
-                    <ExecutionsBar v-if="daily" :data="daily" :total="executionsCount" />
+                    <ExecutionsBar 
+                        v-if="daily" 
+                        :data="daily" 
+                        :total="executionsCount" 
+                        :loading="loading"
+                    />
                 </el-card>
             </template>
 
@@ -531,7 +536,8 @@
                 actionOptions: {},
                 lastRefreshDate: new Date(),
                 changeStatusDialogVisible: false,
-                selectedStatus: undefined
+                selectedStatus: undefined,
+                loading: false
             };
         },
         created() {
@@ -704,6 +710,7 @@
             },
             loadStats() {
                 this.dailyReady = false;
+                this.loading = true;
 
                 this.$store
                     .dispatch("stat/daily", this.loadQuery({
@@ -712,6 +719,7 @@
                     }, true))
                     .then(() => {
                         this.dailyReady = true;
+                        this.loading = false;
                     });
             },
             loadData(callback) {
diff --git a/ui/src/components/flows/Flows.vue b/ui/src/components/flows/Flows.vue
index 164204557fa..347a6fff7ca 100644
--- a/ui/src/components/flows/Flows.vue
+++ b/ui/src/components/flows/Flows.vue
@@ -76,7 +76,11 @@
 
                 <template #top>
                     <el-card v-if="showStatChart()" class="mb-4 shadow">
-                        <ExecutionsBar :data="daily" :total="executionsCount" />
+                        <ExecutionsBar 
+                            :data="daily" 
+                            :total="executionsCount" 
+                            :loading="loading"
+                        />
                     </el-card>
                 </template>
 
@@ -440,6 +444,7 @@
                 showChart: ["true", null].includes(
                     localStorage.getItem(storageKeys.SHOW_FLOWS_CHART),
                 ),
+                loading: false,
             };
         },
         computed: {
@@ -817,6 +822,7 @@
             },
             loadStats() {
                 this.dailyReady = false;
+                this.loading = true;
 
                 if (this.user.hasAny(permission.EXECUTION) && this.showStatChart) {
                     this.$store
@@ -834,6 +840,7 @@
                         )
                         .then(() => {
                             this.dailyReady = true;
+                            this.loading = false;
                         });
                 }
             },
diff --git a/ui/src/components/logs/LogsWrapper.vue b/ui/src/components/logs/LogsWrapper.vue
index 33d0bbe7cf5..9a450643377 100644
--- a/ui/src/components/logs/LogsWrapper.vue
+++ b/ui/src/components/logs/LogsWrapper.vue
@@ -18,7 +18,7 @@
                     <el-card class="mb-3 shadow" v-loading="!statsReady">
                         <div>
                             <template v-if="hasStatsData">
-                                <Logs :data="logDaily" />
+                                <Logs :data="logDaily" :loading="!statsReady" />
                             </template>
                             <NoData v-else />
                         </div>

From 37c43b1c9e5df906602b277e49a9baad4ce645d3 Mon Sep 17 00:00:00 2001
From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 23:15:04 +0530
Subject: [PATCH 2/3] minor tweak

---
 .../tables/executions/EmptyNextScheduled.vue  | 187 +-----------------
 .../tables/executions/NextScheduled.vue       |  16 +-
 2 files changed, 17 insertions(+), 186 deletions(-)

diff --git a/ui/src/components/dashboard/components/tables/executions/EmptyNextScheduled.vue b/ui/src/components/dashboard/components/tables/executions/EmptyNextScheduled.vue
index 7d6126a8e77..37525b442c8 100644
--- a/ui/src/components/dashboard/components/tables/executions/EmptyNextScheduled.vue
+++ b/ui/src/components/dashboard/components/tables/executions/EmptyNextScheduled.vue
@@ -1,188 +1,19 @@
 <template>
-    <div class="h-100 p-4">
-        <div class="d-flex justify-content-between align-items-center">
-            <span class="fs-6 fw-bold">
-                {{ t("dashboard.empty_next_scheduled") }}
+    <div class="p-4 h-100">
+        <span class="fs-6 fw-bold">
+            {{ t("dashboard.next_scheduled_executions") }}
+        </span>
+
+        <div class="pt-4">
+            <span class="align-middle">
+                {{ t("dashboard.not_auth") }}
             </span>
-            <RouterLink
-                :to="{name: 'admin/triggers'}"
-            >
-                <el-button type="primary" size="small" text>
-                    {{ t("dashboard.see_all") }}
-                </el-button>
-            </RouterLink>
         </div>
-
-        <div class="pt-4" v-if="loading">
-            <el-table :data="skeletonData" class="scheduled" :height="240">
-                <el-table-column :label="$t('namespace')">
-                    <template #default>
-                        <el-skeleton-item variant="text" style="width: 100%" />
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('flow')">
-                    <template #default>
-                        <el-skeleton-item variant="text" style="width: 100%" />
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('trigger')" width="100">
-                    <template #default>
-                        <el-skeleton-item variant="text" style="width: 80px" />
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('next')" width="120">
-                    <template #default>
-                        <el-skeleton-item variant="text" style="width: 100px" />
-                    </template>
-                </el-table-column>
-            </el-table>
-        </div>
-
-        <div class="pt-4" v-else-if="triggers.results.length">
-            <el-table
-                :data="triggers.results"
-                class="scheduled"
-                :height="240"
-            >
-                <el-table-column :label="$t('namespace')">
-                    <template #default="scope">
-                        <RouterLink
-                            :to="{
-                                name: 'namespaces/update',
-                                params: {
-                                    id: scope.row.namespace,
-                                },
-                            }"
-                        >
-                            <el-tooltip
-                                :content="scope.row.namespace"
-                                placement="right"
-                            >
-                                <span class="text-truncate">
-                                    {{ scope.row.namespace }}
-                                </span>
-                            </el-tooltip>
-                        </RouterLink>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('flow')">
-                    <template #default="scope">
-                        <RouterLink
-                            :to="{
-                                name: 'flows/update',
-                                params: {
-                                    namespace: scope.row.namespace,
-                                    id: scope.row.flowId,
-                                },
-                            }"
-                        >
-                            <el-tooltip
-                                :content="scope.row.flowId"
-                                placement="right"
-                            >
-                                <span class="text-truncate">
-                                    {{ scope.row.flowId }}
-                                </span>
-                            </el-tooltip>
-                        </RouterLink>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('trigger')" width="100">
-                    <template #default="scope">
-                        <el-tooltip
-                            :content="scope.row.triggerId"
-                            placement="right"
-                        >
-                            <span class="text-truncate">
-                                {{ scope.row.triggerId }}
-                            </span>
-                        </el-tooltip>
-                    </template>
-                </el-table-column>
-                <el-table-column :label="$t('next')" width="120">
-                    <template #default="scope">
-                        <date-ago :date="scope.row.next" />
-                    </template>
-                </el-table-column>
-            </el-table>
-            <div class="d-flex justify-content-end">
-                <el-pagination
-                    v-model:current-page="currentPage"
-                    @current-change="loadTriggers"
-                    :total="triggers.total"
-                    layout="prev, pager, next, total"
-                    :page-size="5"
-                    size="small"
-                    class="pt-3"
-                />
-            </div>
-        </div>
-        <NoData v-else />
     </div>
 </template>
 
 <script setup>
-    import {onBeforeMount, ref} from "vue";
-    import {useStore} from "vuex";
     import {useI18n} from "vue-i18n";
 
-    import NoData from "../../../../layout/NoData.vue";
-    import DateAgo from "../../../../layout/DateAgo.vue";
-
-    import {RouterLink} from "vue-router";
-
-    const props = defineProps({
-        flow: {
-            type: String,
-            required: false,
-            default: null,
-        },
-        namespace: {
-            type: String,
-            required: false,
-            default: null,
-        },
-        loading: {
-            type: Boolean,
-            default: false
-        }
-    });
-
-    const store = useStore();
     const {t} = useI18n({useScope: "global"});
-
-    const triggers = ref({results: [], total: 0});
-    const currentPage = ref(1);
-
-    const skeletonData = Array(5).fill({});
-
-    const loadTriggers = (page = 1) => {
-        store
-            .dispatch("trigger/findTriggers", {
-                namespace: props.namespace,
-                flowId: props.flow,
-                size: 5,
-                page,
-                sort: "next:asc",
-                emptyNext: true,
-            })
-            .then((response) => {
-                if (!response) return;
-                triggers.value = response;
-            });
-    };
-
-    onBeforeMount(() => {
-        loadTriggers();
-    });
-</script>
-
-<style lang="scss" scoped>
-.scheduled {
-    background: var(--ks-background-table-row);
-}
-
-:deep(.el-skeleton-item) {
-    background: var(--ks-background-skeleton);
-}
-</style>
+</script>
\ No newline at end of file
diff --git a/ui/src/components/dashboard/components/tables/executions/NextScheduled.vue b/ui/src/components/dashboard/components/tables/executions/NextScheduled.vue
index cbcf0b7294b..2adaecf8054 100644
--- a/ui/src/components/dashboard/components/tables/executions/NextScheduled.vue
+++ b/ui/src/components/dashboard/components/tables/executions/NextScheduled.vue
@@ -15,22 +15,22 @@
 
         <div class="pt-4" v-if="loading">
             <el-table :data="skeletonData" class="scheduled" :height="240">
-                <el-table-column :label="$t('namespace')">
+                <el-table-column :label="$t('dashboard.id')" width="100">
                     <template #default>
-                        <el-skeleton-item variant="text" style="width: 100%" />
+                        <el-skeleton-item variant="text" style="width: 80px" />
                     </template>
                 </el-table-column>
-                <el-table-column :label="$t('flow')">
+                <el-table-column :label="$t('namespace')">
                     <template #default>
                         <el-skeleton-item variant="text" style="width: 100%" />
                     </template>
                 </el-table-column>
-                <el-table-column :label="$t('trigger')" width="100">
+                <el-table-column :label="$t('flow')">
                     <template #default>
-                        <el-skeleton-item variant="text" style="width: 80px" />
+                        <el-skeleton-item variant="text" style="width: 100%" />
                     </template>
                 </el-table-column>
-                <el-table-column :label="$t('next')" width="120">
+                <el-table-column :label="$t('dashboard.next_execution_date')" width="120">
                     <template #default>
                         <el-skeleton-item variant="text" style="width: 100px" />
                     </template>
@@ -74,7 +74,7 @@
                         />
                     </template>
                 </el-table-column>
-                <el-table-column :label="$t('id')" width="100">
+                <el-table-column :label="$t('dashboard.id')" width="100">
                     <template #default="scope">
                         <RouterLink :to="{name: 'admin/triggers'}">
                             <el-tooltip
@@ -132,7 +132,7 @@
                         </RouterLink>
                     </template>
                 </el-table-column>
-                <el-table-column :label="$t('next')" width="120">
+                <el-table-column :label="$t('dashboard.next_execution_date')">
                     <template #default="scope">
                         <date-ago :date="scope.row.triggerContext.nextExecutionDate" />
                     </template>

From 3b5dbaf9e61ec1d85291fef9fc81243701f9a772 Mon Sep 17 00:00:00 2001
From: Piyush-r-bhaskar <prbhasker0012@gmail.com>
Date: Sat, 1 Mar 2025 00:35:43 +0530
Subject: [PATCH 3/3] fix(ui): fixed momentary No Data visual.

---
 ui/src/components/dashboard/Dashboard.vue | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/ui/src/components/dashboard/Dashboard.vue b/ui/src/components/dashboard/Dashboard.vue
index 53de0211720..8a4dcd8d132 100644
--- a/ui/src/components/dashboard/Dashboard.vue
+++ b/ui/src/components/dashboard/Dashboard.vue
@@ -470,21 +470,13 @@
         if (!custom.value.shown) {
             try {
                 executionsLoading.value = true;
-                await new Promise((resolve) => {
-                    setTimeout(async () => {
-                        try {
-                            await Promise.any([
-                                fetchNumbers(),
-                                fetchExecutions(),
-                                fetchNamespaceExecutions(),
-                                fetchLogs(),
-                            ]);
-                            resolve();
-                        } catch (error) {
-                            console.error("All promises failed:", error);
-                            resolve();
-                        }
-                    }, 1000); // 1 second delay - please remove this after testing.
+                await Promise.all([
+                    fetchNumbers(),
+                    fetchExecutions(),
+                    fetchNamespaceExecutions(),
+                    fetchLogs(),
+                ]).catch(error => {
+                    console.error("Failed to fetch dashboard data:", error);
                 });
             } finally {
                 executionsLoading.value = false;