fix(Wrapped): Improve data loading

2 files changed, 18 insertions, 1 deletions

diff --git a/src/lib/Tools/Wrapped/DataLoader.svelte b/src/lib/Tools/Wrapped/DataLoader.svelte
new file mode 100644
index 00000000..9c99b4a4
--- /dev/null
+++ b/src/lib/Tools/Wrapped/DataLoader.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  export let onLoad: () => void;
+
+  onMount(() => onLoad());
+</script>
diff --git a/src/lib/Tools/Wrapped/Tool.svelte b/src/lib/Tools/Wrapped/Tool.svelte
index f060f444..c6b91d0f 100644
--- a/src/lib/Tools/Wrapped/Tool.svelte
+++ b/src/lib/Tools/Wrapped/Tool.svelte
@@ -32,6 +32,7 @@
   import MediaExtras from './MediaExtras.svelte';
   import MediaPanel from './Media.svelte';
   import Watermark from './Watermark.svelte';
+  import DataLoader from './DataLoader.svelte';
   import Skeleton from '$lib/Loading/Skeleton.svelte';
   import Message from '$lib/Loading/Message.svelte';
   import tooltip from '$lib/Tooltip/tooltip';
@@ -85,6 +86,7 @@
   let needsRefetch = false;
   let dataFetched = false;
   let fetchKey = 0;
+  let wrappedDataLoaded = false;
   let lastSelectedYear = selectedYear;
   let lastUseFullActivityHistory = useFullActivityHistory;
   let lastDisableLoopingActivityCounter = disableLoopingActivityCounter;
@@ -160,7 +162,7 @@
     includeOngoingMediaFromPreviousYears = includeOngoingMediaFromPreviousYears;
     excludeUnratedUnwatched = excludeUnratedUnwatched;
 
-    update().then(updateWidth).catch(updateWidth);
+    if (shouldFetchData) update().then(updateWidth).catch(updateWidth);
   }
   $: {
     animeList = animeList;
@@ -326,6 +328,7 @@
     needsRefetch = false;
     dataFetched = true;
     fetchKey += 1;
+    wrappedDataLoaded = false;
     lastSelectedYear = selectedYear;
     lastUseFullActivityHistory = useFullActivityHistory;
     lastDisableLoopingActivityCounter = disableLoopingActivityCounter;
@@ -758,6 +761,13 @@
 
             <Skeleton count={2} />
           {:then wrapped}
+            <DataLoader
+              onLoad={() => {
+                wrappedDataLoaded = true;
+
+                update().then(updateWidth).catch(updateWidth);
+              }}
+            />
             <div class="card">
               <div
                 id="wrapped"