mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2024-12-23 02:39:48 +01:00
hide discord profile image if image is not loaded yet
This commit is contained in:
parent
43f214e5b7
commit
799b6290f0
1 changed files with 14 additions and 2 deletions
|
@ -3,7 +3,7 @@
|
||||||
import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
|
import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte'
|
||||||
import { spring } from 'svelte/motion'
|
import { spring } from 'svelte/motion'
|
||||||
import { contextId as ctxId } from './CommunitySlice.svelte'
|
import { contextId as ctxId } from './CommunitySlice.svelte'
|
||||||
import { getIsMobile, lerp } from '$lib/Helper.mjs'
|
import { lerp } from '$lib/Helper.mjs'
|
||||||
import { inview } from 'svelte-inview'
|
import { inview } from 'svelte-inview'
|
||||||
|
|
||||||
/** @type {string} */
|
/** @type {string} */
|
||||||
|
@ -34,8 +34,10 @@
|
||||||
precision: 0.001
|
precision: 0.001
|
||||||
})
|
})
|
||||||
|
|
||||||
|
/** @type {HTMLImageElement}*/
|
||||||
let imageElement
|
let imageElement
|
||||||
let hasEnteredView = false
|
let hasEnteredView = false
|
||||||
|
let hasImageLoaded = false
|
||||||
|
|
||||||
/** @type {import('interactjs').default} */
|
/** @type {import('interactjs').default} */
|
||||||
let interactionjs
|
let interactionjs
|
||||||
|
@ -72,11 +74,20 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
// Nesecarry as the load image load event might not get fired when its already loaded
|
||||||
|
hasImageLoaded = hasImageLoaded || imageElement.complete
|
||||||
|
})
|
||||||
|
|
||||||
onDestroy(() => interactionjs?.off())
|
onDestroy(() => interactionjs?.off())
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class={clsx('absolute left-0 top-0 touch-none select-none ', containerClass)}
|
class={clsx(
|
||||||
|
'absolute left-0 top-0 touch-none select-none transition-opacity ',
|
||||||
|
containerClass,
|
||||||
|
hasImageLoaded ? 'opacity-100' : 'opacity-0'
|
||||||
|
)}
|
||||||
style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
|
style:translate={coordinates.map((xy) => xy + 'px').join(' ')}
|
||||||
style="width: {size}px; height: {size}px;--delay: {delay}ms;"
|
style="width: {size}px; height: {size}px;--delay: {delay}ms;"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
|
@ -94,6 +105,7 @@
|
||||||
<img
|
<img
|
||||||
class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}"
|
class="group h-full w-full touch-none select-none rounded-[50%] object-cover outline outline-4 {$$restProps.class}"
|
||||||
bind:this={imageElement}
|
bind:this={imageElement}
|
||||||
|
on:load={() => (hasImageLoaded = true)}
|
||||||
src={image}
|
src={image}
|
||||||
alt="community profile picture"
|
alt="community profile picture"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
|
|
Loading…
Reference in a new issue