Skip to content

Commit

Permalink
Added loading icon in gallery when opening images
Browse files Browse the repository at this point in the history
  • Loading branch information
Nrosa01 committed Jun 7, 2023
1 parent e661509 commit ac6b50b
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 34 deletions.
4 changes: 4 additions & 0 deletions src/app.postcss
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@
/* display: none; */
}

.loading-image
{
content: url(data:image/webp;base64,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);
}

/* Handle */
::-webkit-scrollbar-thumb {
Expand Down
84 changes: 51 additions & 33 deletions src/lib/Image.svelte
Original file line number Diff line number Diff line change
@@ -1,52 +1,70 @@
<script>
import { onMount } from 'svelte';
import { fade } from "svelte/transition";
import { tag } from "../assets/ToggleStore.js";
export let image;
export let thumbnail;
let enabled = true;
let expanded = false;
function toggleExpansion() {
expanded = !expanded;
import { onMount } from 'svelte';
import { fade } from "svelte/transition";
import { tag } from "../assets/ToggleStore.js";
export let image;
export let thumbnail;
let enabled = true;
let expanded = false;
let loaded = false; // Variable para controlar el estado de carga
function toggleExpansion() {
expanded = !expanded;
if (expanded && !loaded) {
loadImage();
}
onMount(() => {
tag.subscribe(value => {
enabled = false;
// wait 1 frame for the DOM to update then update enabled with the correct value
requestAnimationFrame(() => {
enabled = value == "All" || image.tags.includes(value.toLowerCase());
});
}
onMount(() => {
tag.subscribe(value => {
enabled = false;
requestAnimationFrame(() => {
enabled = value == "All" || image.tags.includes(value.toLowerCase());
});
});
});
function escape(event) {
if (event.key === 'Escape') {
expanded = false;
}
function escape(event) {
if (event.key === 'Escape') {
expanded = false;
}
</script>

<svelte:window on:keydown="{escape}" />
}
function loadImage() {
console.log("Loading image")
const img = new Image();
img.src = image.src;
img.onload = () => {
loaded = true;
};
}
</script>

<svelte:window on:keydown="{escape}" />

{#if enabled}
{#if enabled}
<li class="lg:h-[25vh] h-[20vw] flex-grow m-2" in:fade="{{duration: 400}}">
<img
class="max-h-full min-w-full object-cover align-bottom rounded-xl"
src="{thumbnail.src}"
alt="{thumbnail.title}"
loading="lazy"
on:click="{toggleExpansion}"
on:keydown
on:click={toggleExpansion} />
/>

{#if expanded}
<div class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-75 z-10" transition:fade="{{ duration: 125 }}" on:click={toggleExpansion} on:keydown>
<img class="max-w-[90vw] max-h-[90vh]" src="{image.src}" alt="{image.alt}" loading="lazy">
<div class="fixed top-0 left-0 right-0 bottom-0 flex items-center justify-center bg-black bg-opacity-75 z-10 backdrop-blur-sm" transition:fade="{{ duration: 125 }}" on:click="{toggleExpansion}" on:keydown>
{#if !loaded}
<div class="fixed top-0 left-0 right-0 bottom-0 z-10 flex flex-col items-center justify-center text-white animate-pulse" transition:fade>
<img class="loading-image" alt="loading nahi"/>
<span class="paragraph">Loading...</span>
</div>
{:else}
<img class="max-w-[90vw] max-h-[90vh] z-50" in:fade src="{image.src}" alt="{image.alt}" loading="lazy">
{/if}
</div>
{/if}
</li>
{/if}
</li>
{/if}
2 changes: 1 addition & 1 deletion src/lib/ToggleButton.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,6 @@
<button
class={`${enabled ? 'bg-blue-500 hover:bg-blue-700' : 'bg-gray-500 hover:bg-gray-700'} text-white font-bold py-2 px-4 rounded-full w-full text-xs xl:h-fit h-1 flex items-center justify-center`}
on:click={toggle}>
<span class="xl:text-base text-[0.5rem]">{text}</span>
<span class="xl:text-base text-[0.5rem] quicksand-bold">{text}</span>
</button>

0 comments on commit ac6b50b

Please sign in to comment.