Fix transitions

Website/src/routes/(main)/events/time-attack/rankings/[questId=integer]/dataTable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+  import { onMount, tick } from 'svelte';
   import { readable, writable } from 'svelte/store';
-  import { slide } from 'svelte/transition';
+  import { slide, fade, fly, blur } from 'svelte/transition';
   import { createRender, createTable, Render, Subscribe } from 'svelte-headless-table';
   import { addExpandedRows, addPagination } from 'svelte-headless-table/plugins';
 
@@ -73,23 +73,31 @@
   const expandedIds = pluginStates.expand.expandedIds;
   const { pageIndex, hasPreviousPage, hasNextPage } = pluginStates.page;
 
-  const changePage = (newPage: number) => {
+  let initialized = false;
+  let showExpanded = true;
+
+  const changePage = async (newPage: number) => {
+    // Unmount the 'grandparent' block of the team-comp to skip the slide out transition
+    showExpanded = false;
+    await tick();
+
+    // Reset the expanded IDs which would have otherwise caused a transition
     expandedIds.clear();
 
     $pageIndex = newPage;
     const params = new URLSearchParams($page.url.searchParams);
     params.set('page', ($pageIndex + 1).toString());
 
+    await goto(`?${params.toString()}`, { noScroll: true });
+
     const el = document.querySelector('#time-attack-table-title');
     if (el) {
-      el.scrollIntoView({ block: 'start' });
+      el.scrollIntoView({ block: 'nearest' });
     }
 
-    goto(`?${params.toString()}`, { noScroll: true });
+    showExpanded = true;
   };
 
-  let initialized = false;
-
   onMount(() => {
     const params = new URLSearchParams($page.url.searchParams);
     const pageNumber = Number(params.get('page'));
@@ -139,11 +147,11 @@
               </Subscribe>
             {/each}
           </Table.Row>
-          {#key pageIndex}
+          {#if showExpanded}
             {#if $expandedIds[row.id] && row.isData()}
               <tr class="border-b">
                 <td colspan="4">
-                  <div in:slide={{ duration: 500 }} class="p-4">
+                  <div transition:slide={{ duration: 500 }} class="p-4">
                     <TeamComposition
                       units={getTeam(coop, row.original.players)}
                       unitKeys={getTeamKeys(coop, row.original.players)}
@@ -153,7 +161,7 @@
                 </td>
               </tr>
             {/if}
-          {/key}
+          {/if}
         </Subscribe>
       {/each}
     </Table.Body>