I have Firebase app with Svelte 5. Svelte is '5.17.5', @sveltejs/kit is '2.15.3', firebase is '11.2.0', vite is '6.0.7'. Here is method, it doesn't stop on await/async. What am I missing?

Here is definition:

import { getDownloadURL, getStorage, listAll, ref } from 'firebase/storage';
import { page } from '$app/state';
import { getZStorageI, zFirestore, zlataTrinket_kategorija, generateKeyword, type ZlataTrinket } from '$lib/common';

Here is code:

let pictureUrl: Array<string> = $state([]);

onMount(async () => {
  const _id = page.url.searchParams.get('id');
  const storage = getStorage();
  const listRef = ref(storage, getZStorageI(_id));
  let i = 0;

  await listAll(listRef).then(async (res) => {
    res.items.forEach(async (itemRef) => {
      await getDownloadURL(itemRef).then(async (url) => {
        console.log(url);
                    
        pictureUrl[i++] =  url;
      });
    });
  });

  console.log("It should be after?");
});

It show:

It should be after?
+page.svelte:44 .firebasestorage.app/o/zStorage%2F400_499%2F463%2F2.jpg?alt=media&token=fd48f7c8-d90d-4841-91e9-7fd3ca88780a
+page.svelte:44 .firebasestorage.app/o/zStorage%2F400_499%2F463%2F4.jpg?alt=media&token=2329c929-75b8-4251-a02e-82b31b2febcb
+page.svelte:44 .firebasestorage.app/o/zStorage%2F400_499%2F463%2F1.jpg?alt=media&token=5fbdb696-977b-498d-928a-3280843e4748
+page.svelte:44 .firebasestorage.app/o/zStorage%2F400_49

I have Firebase app with Svelte 5. Svelte is '5.17.5', @sveltejs/kit is '2.15.3', firebase is '11.2.0', vite is '6.0.7'. Here is method, it doesn't stop on await/async. What am I missing?

Here is definition:

import { getDownloadURL, getStorage, listAll, ref } from 'firebase/storage';
import { page } from '$app/state';
import { getZStorageI, zFirestore, zlataTrinket_kategorija, generateKeyword, type ZlataTrinket } from '$lib/common';

Here is code:

let pictureUrl: Array<string> = $state([]);

onMount(async () => {
  const _id = page.url.searchParams.get('id');
  const storage = getStorage();
  const listRef = ref(storage, getZStorageI(_id));
  let i = 0;

  await listAll(listRef).then(async (res) => {
    res.items.forEach(async (itemRef) => {
      await getDownloadURL(itemRef).then(async (url) => {
        console.log(url);
                    
        pictureUrl[i++] =  url;
      });
    });
  });

  console.log("It should be after?");
});

It show:

It should be after?
+page.svelte:44 https://firebasestorage.googleapis/v0/b/zlata-67787.firebasestorage.app/o/zStorage%2F400_499%2F463%2F2.jpg?alt=media&token=fd48f7c8-d90d-4841-91e9-7fd3ca88780a
+page.svelte:44 https://firebasestorage.googleapis/v0/b/zlata-67787.firebasestorage.app/o/zStorage%2F400_499%2F463%2F4.jpg?alt=media&token=2329c929-75b8-4251-a02e-82b31b2febcb
+page.svelte:44 https://firebasestorage.googleapis/v0/b/zlata-67787.firebasestorage.app/o/zStorage%2F400_499%2F463%2F1.jpg?alt=media&token=5fbdb696-977b-498d-928a-3280843e4748
+page.svelte:44 https://firebasestorage.googleapis/v0/b/zlata-67787.firebasestorage.app/o/zStorage%2F400_49

• svelte
• sveltekit
• svelte-5

Share Improve this question Follow edited Mar 10 at 12:59 brunnerh 186k3030 gold badges357357 silver badges430430 bronze badges asked Mar 10 at 12:32 HrvojeHrvoje 13111 gold badge11 silver badge1010 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 4

The res.items.forEach breaks the await chain.

If you need sequential processing use a regular for loop.
If not, use await Promise.all(res.items.map(async item => { ... })).

(Also note that having async code in onMount will not stop the component from rendering. It will also mess up any cleanup you try to do, i.e. a function returned from the onMount callback will not be executed this way.)