From f5ed83eefe0066bf92e536a5d82bdc9869e8491b Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Thu, 21 Nov 2024 08:03:28 -0800
Subject: [PATCH] feat: improves loader random order of boxes

---
 assets/components/LogViewer/EventSource.vue |  8 ++++++--
 assets/composable/eventStreams.ts           | 11 ++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/assets/components/LogViewer/EventSource.vue b/assets/components/LogViewer/EventSource.vue
index 2d7c24517d7..283ccf90964 100644
--- a/assets/components/LogViewer/EventSource.vue
+++ b/assets/components/LogViewer/EventSource.vue
@@ -1,7 +1,7 @@
 <template>
   <InfiniteLoader :onLoadMore="fetchMore" :enabled="!loadingMore && messages.length > 10" />
   <ul class="flex animate-pulse flex-col gap-4 p-4" v-if="loading || (noLogs && waitingForMoreLog)">
-    <div class="flex flex-row gap-2" v-for="size in shuffle(['w-3/5', 'w-2/3', 'w-9/12', 'w-1/2', 'w-1/3', 'w-3/4'])">
+    <div class="flex flex-row gap-2" v-for="size in sizes">
       <div class="h-3 w-40 shrink-0 rounded-full bg-base-content/50 opacity-50"></div>
       <div class="h-3 rounded-full bg-base-content/50 opacity-50" :class="size"></div>
     </div>
@@ -20,7 +20,7 @@ const { entity, streamSource } = $defineProps<{
   entity: T;
 }>();
 
-const { messages, loadOlderLogs, isLoadingMore, opened, loading, error } = streamSource($$(entity));
+const { messages, loadOlderLogs, isLoadingMore, opened, loading, error, eventSourceURL } = streamSource($$(entity));
 const { loadingMore } = useLoggingContext();
 const color = computed(() => {
   if (error.value) return "error";
@@ -48,4 +48,8 @@ const fetchMore = async () => {
 const shuffle = (items: any[]) => {
   return items.sort(() => Math.random() - 0.5);
 };
+
+const sizes = computedWithControl(eventSourceURL, () =>
+  shuffle(["w-3/5", "w-2/3", "w-9/12", "w-1/2", "w-1/3", "w-3/4"]),
+);
 </script>
diff --git a/assets/composable/eventStreams.ts b/assets/composable/eventStreams.ts
index 52edc03fe43..4a216a23a71 100644
--- a/assets/composable/eventStreams.ts
+++ b/assets/composable/eventStreams.ts
@@ -218,5 +218,14 @@ function useLogStream(url: Ref<string>, loadMoreUrl?: Ref<string>) {
     }
   });
 
-  return { messages, loadOlderLogs, isLoadingMore, hasComplexLogs, opened, error, loading };
+  return {
+    messages,
+    loadOlderLogs,
+    isLoadingMore,
+    hasComplexLogs,
+    opened,
+    error,
+    loading,
+    eventSourceURL: urlWithParams,
+  };
 }