Improve formatting
This commit is contained in:
@ -2,19 +2,19 @@
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
|
||||
|
||||
export let moreAvailable: boolean = false;
|
||||
export let isLoading: boolean = false;
|
||||
export let moreAvailable = false;
|
||||
export let isLoading = false;
|
||||
let displayText = '';
|
||||
let title = '';
|
||||
let disabled: boolean;
|
||||
|
||||
$: if (isLoading) {
|
||||
displayText = 'Loading...';
|
||||
displayText = 'Loading...';
|
||||
} else if (!moreAvailable) {
|
||||
displayText = 'You reached the end';
|
||||
displayText = 'You reached the end';
|
||||
} else {
|
||||
displayText = 'Load More';
|
||||
};
|
||||
displayText = 'Load More';
|
||||
}
|
||||
$: disabled = !moreAvailable || isLoading;
|
||||
$: title = moreAvailable ? 'Load More' : 'There be dragons!';
|
||||
|
||||
@ -26,10 +26,10 @@
|
||||
</script>
|
||||
|
||||
<button on:click={loadOlderPosts} {disabled} {title}>
|
||||
<div class="loading" class:collapsed={!isLoading}>
|
||||
<LoadingSpinnerComponent size='0.5em' thickness='6px' />
|
||||
</div>
|
||||
<span>{displayText}</span>
|
||||
<div class="loading" class:collapsed={!isLoading}>
|
||||
<LoadingSpinnerComponent size="0.5em" thickness="6px" />
|
||||
</div>
|
||||
<span>{displayText}</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
@ -78,4 +78,4 @@
|
||||
max-width: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
Reference in New Issue
Block a user