<script>
  import pretty from 'pretty-bytes'
  import { onMount } from 'svelte'

  let usage = null

  onMount(async () => {
    const estimate = await window.navigator.storage.estimate()
    usage = pretty(estimate.usage)
  })
</script>

{#if usage === null}
  <span class="loading" />
{:else}
  <span>Storage used: <span class="font-mono">{usage}</span></span>
{/if}
