hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-12-23 02:39:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

hide discord profile image if image is not loaded yet

Browse source
This commit is contained in:
Christofer 2023-09-13 16:41:38 +04:00
parent 43f214e5b7
commit 799b6290f0
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/routes/DiscordProfilePicture.svelte
View file

@ -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"