<script setup lang="ts">
const isLoading = ref(true)
const mainRef = ref<HTMLElement>()

const { height: viewportH } = useWindowSize()
const { bottom: mainBottom } = useElementBounding(mainRef)

const pinToMain = computed(() => {
  if (!mainBottom.value) return false
  return mainBottom.value <= viewportH.value
})

provide('pinToMain', pinToMain)

onMounted(() => {
  isLoading.value = false
})
</script>

<template>
  <LayoutsHeader />
  <AtomsLoadingSimple :is-loading="isLoading" />
  <main id="LayoutsMain" ref="mainRef" class="relative">
    <slot />
  </main>
  <LayoutsFooter />
</template>
