<style>
	#loader {
		transition: all 0.3s ease-in-out;
		opacity: 1;
		visibility: visible;
		position: fixed;
		height: 100vh;
		width: 100%;
		background: #fff;
		z-index: 90000;
	}

	#loader.fadeOut {
		opacity: 0;
		visibility: hidden;
	}

	.spinner {
		width: 40px;
		height: 40px;
		position: absolute;
		top: calc(50% - 20px);
		left: calc(50% - 20px);
		background-color: #333;
		border-radius: 100%;
		-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
		animation: sk-scaleout 1.0s infinite ease-in-out;
	}

	@-webkit-keyframes sk-scaleout {
		0% { -webkit-transform: scale(0) }
		100% {
			-webkit-transform: scale(1.0);
			opacity: 0;
		}
	}

	@keyframes sk-scaleout {
		0% {
			-webkit-transform: scale(0);
			transform: scale(0);
		} 100% {
			-webkit-transform: scale(1.0);
			transform: scale(1.0);
			opacity: 0;
		}
	}
</style>

<script>
import UserContainer from './common/containers/UserContainer.svelte';
import ContentContainer from './common/containers/ContentContainer.svelte';
import firebaseInstance from './common/resources/firebase/index.js';

let loggedIn = firebaseInstance.getCurrentUserId() == null ? false : true;
console.log(loggedIn+ " this is value of loggedin");

console.log("START NEXT");
window.addEventListener('load', function load() {
			const loader = document.getElementById('loader');
			loader.parentNode.removeChild(loader);
});
</script>
<body class="app">
	{#if loggedIn}
	<ContentContainer />
	{/if}

	{#if !loggedIn}
	<UserContainer bind:loggedIn={loggedIn}/>
	{/if}

<div id='loader'>
	<div class="spinner"></div>
</div>
</body>
