HTML not dynamically reloading in Svelte

So I have this function that fetches a bunch of images from my firebase and stores everything in a writable array called attributeList

  async function loadPokemon(generation:number){            // Create a reference under which you want to list        const storageRef = collection(db, 'Pokémon/Generation'+ generation +'/Pokémon');        const q = query(storageRef, orderBy("dexNr", "asc"));        const querySnapshot = await getDocs(q);        /* let temp = await Promise.all(                querySnapshot.docs.map(async (doc) => {                    const infoObj = new Attributes(doc.data().URL_Normal, doc.data().name);                    return infoObj;                }));        $attributeList = [...$attributeList, temp];*/        $attributeList = [];        $attributeList.push(        ...(await Promise.all(            querySnapshot.docs.map(async (doc) => {                const infoObj = new Attributes(doc.data().URL_Normal, doc.data().name);                return infoObj;            })        ))        );    }

And Here's the HTML that is used to display said array, it is meant to update every time the attributeList writable changes

<div>      {#if $loggedIn==true}<div class="gridContainer">            {#key $attributeList}                {#each $attributeList as attribute}<DexEntry imageSource={attribute.imgURL} pokemonName={attribute.name}/>                {/each}            {/key}</div><div id="divi"><div class="dropdown"><button class="dropbtn">Dropdown</button><div class="dropdown-content"><button on:click={() => loadPokemon(2)}>Generation 2</button><button on:click={() => loadPokemon(3)}>Generation 3</button><button on:click={() => loadPokemon(4)}>Generation 4</button><button on:click={() => loadPokemon(5)}>Generation 5</button><button on:click={() => loadPokemon(6)}>Generation 6</button><button on:click={() => loadPokemon(7)}>Generation 7</button><button on:click={() => loadPokemon(8)}>Generation 8</button><button on:click={() => loadPokemon(9)}>Generation 9</button></div></div> </div>    {/if}

However, when I run the code and select a different Pokémon generation from the dropdown, I call the loadPokemon function, the array is correctly updated with all the new info, but I need to click away and back to the "ShinyDex" directory to see the changes, because all that happens is that the page turns white, so the array is just not displayed anymore (see images)

Here you can see the three pictures. First one is showing gen 2 Pokémon. Then I click on gen 3, and everything disappears. when I click away from the "shiny dex" tab and back again, the gen 3 Pokémon are displayed.