Add `pending` ref for `useStorageFileUrl` composable

[BenJackGill]

What problem is this solving

Currently, there is no straightforward way to display a loading indicator while the url from useStorageFileUrl is being fetched.

I am referring to the time it takes to fetch the URL itself, not the time it takes to load the image after the URL is available.

Most other composables in VueFire export a convenient boolean pending ref to indicate loading status, but useStorageFileUrl is missing this pending ref.

Adding this feature would be useful for avoiding flashes of text or other UI inconsistencies while the URL is loading.

Proposed solution

const {
  url,
  refresh,
  promise,
  pending // <-- Add this
} = useStorageFileUrl(mountainFileRef)

Describe alternatives you've considered

This is my current workaround. Not as clean or as consistent as having a ready made pending ref.

<template>
  <img v-if="logoUrl" :src="logoUrl ?? ''" :alt="My Great App" />
  <div v-else-if="!loading && !logoUrl" class="text-center">
    My Great App
  </div>
</template>

<script setup lang="ts">
import { getProjectData } from '@repo/project-config';
import { ref as storageRef } from 'firebase/storage';
import { onMounted, ref } from 'vue';
import { useFirebaseStorage, useStorageFileUrl } from 'vuefire';

const loading = ref(false);
const storage = useFirebaseStorage();
const logoFileRef = storageRef(
  storage,
  'public/images/logos/logo-rectangle.svg',
);
const { promise: logoUrlPromise, url: logoUrl } =
  useStorageFileUrl(logoFileRef);

onMounted(async () => {
  try {
    loading.value = true;
    await logoUrlPromise.value;
  } catch (error) {
    console.error('Failed to load logo:', error);
  } finally {
    loading.value = false;
  }
});
</script>