<script lang="ts">
import Pagination from "../helperComponents/Pagination.svelte";
import WatchList from "../helperComponents/WatchList.svelte";
import {
    aniListLoggedIn,
    aniListPrimary,
    loading,
} from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
import loader from '../helperFunctions/loader'

let isAniListPrimary: boolean
let isAniListLoggedIn: boolean

aniListPrimary.subscribe((value) => isAniListPrimary = value)
aniListLoggedIn.subscribe((value) => isAniListLoggedIn = value)
</script>
{#if isAniListLoggedIn && isAniListPrimary}
<div class="container py-10">
    <Pagination />
    <WatchList />
    <Pagination />
</div>
{:else}
    <div use:loader={loading}></div>
{/if}