feat[frontend]: image loading indicator (cherry-pick)

Qwiri · Jan 9, 2022 · d4185b3 · d4185b3
1 parent c67ac62
commit d4185b3
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 15 deletions.
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -4,6 +4,7 @@
 	import { Router, Route } from "svelte-navigator";
 	import { SvelteToast } from "@zerodevx/svelte-toast";
 	import { state } from "./store";
+import Image from "./assets/Image.svelte";
 	
 	let title: string = "GYF";
 	$: title = `GYF - ${$state}`;

diff --git a/frontend/src/assets/Image.svelte b/frontend/src/assets/Image.svelte
@@ -0,0 +1,88 @@
+<script lang="ts" >
+
+    export let src: string;
+    export let alt: string;
+
+    // if no height is given, the loading animation can't be shown
+    export let width: string = "100px";
+    export let height: string = "100px";
+
+    let loaded = false;
+
+</script>
+<div class="imageComponent" id="imageContainer" style="width: {width}; height: {height};">
+
+    <!-- only play animation while image isn't loaded -->
+    {#if !loaded}
+        <div id="loadingDiv">
+            <svg
+            viewBox="0 0 81.88971 39.421074"
+            version="1.1"
+            id="svg"
+            xmlns="http://www.w3.org/2000/svg">
+            <g
+                transform="translate(-50.94151,-81.034871)">
+                <path
+                style="fill:none;stroke:#24fd00;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
+                d="M 71.471849,116.3318 C 90.312046,116.16493 93.35513,85.296553 113.45884,85.036357 133.5728,84.776029 133.96011,116.22354 114.54964,116.45462 95.139169,116.6857 85.289207,84.860857 71.391071,85.075926 51.274686,85.142387 47.684068,116.54248 71.471849,116.3318 Z"
+                id="stroke" />
+            </g>
+            </svg>
+        </div>
+    {/if}
+
+    <!-- the actual image -->
+    <img id="image" {src} {alt} on:load={e => loaded = true}/>
+
+
+</div>
+
+
+<style lang="scss">
+    #imageContainer {
+        position: relative;
+    }
+
+    #image {
+        vertical-align: top;
+        object-fit: contain;
+        width: 100%;
+        height: 100%;
+    }
+
+    #loadingDiv {
+        background-color: #131313;
+        border-radius: .5rem;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    #svg {
+        width: 50%;
+    }
+
+    @keyframes animateInfinityIcon {
+        from{
+            stroke-dashoffset: 0;
+        }
+        to {
+            stroke-dashoffset: 209.14979553222656;
+        }
+    }
+
+    #stroke {
+        stroke-dasharray: 189.14979553222656 20;
+        animation-name: animateInfinityIcon;
+        animation-timing-function: linear;
+        animation-duration: 3s;
+        animation-iteration-count: infinite;
+        animation-fill-mode: forwards;
+    }
+
+</style>
diff --git a/frontend/src/screens/SearchGif.svelte b/frontend/src/screens/SearchGif.svelte
@@ -3,6 +3,7 @@
     import { gifSubmitted, ws } from "../store";
     import { Giphy, Providers } from "./search";
     import type { Provider, SearchResult } from "./search";
+import Image from "../assets/Image.svelte";
 
     let provider: Provider = Giphy; // Make Giphy the default provider
 
@@ -76,10 +77,11 @@
         <div id="resultWrapper">
             {#if searchResults.length > 0}
                 {#each searchResults as result}
-                    <div class="imgContainer">
-                        <img
+                    <div class="imgContainer" on:click={(e) => submitGif(e, result)} >
+                        <Image
+                            width="100%"
+                            height="100%"
                             src={result.preview_url}
-                            on:click={(e) => submitGif(e, result)}
                             alt="gif"
                         />
                     </div>
@@ -91,7 +93,7 @@
 {:else}
     <div id="submissionWrapper">
         <h1>Your Submission</h1>
-        <img id="submission" src={submission} alt="Your submission" />
+        <Image width="auto" height="auto" src={submission} alt="Your submission" />
         <button on:click={chooseNew}>Choose another</button>
     </div>
 {/if}
@@ -130,20 +132,22 @@
         }
     }
 
-    img:hover {
-        cursor: pointer;
-        opacity: 0.5;
-    }
 
     .imgContainer {
         width: 8rem;
         height: 8rem;
         display: flex;
         flex-direction: column;
         justify-content: center;
+        align-items: center;
         border-radius: 1rem;
         background-color: #181818;
         overflow: hidden;
+
+        :global(.imageComponent):hover {
+            cursor: pointer;
+            opacity: 0.5;
+        }
     }
 
     #shownProvider {
@@ -202,15 +206,16 @@
         }
     }
 
-    #submission {
-        height: 10rem;
-    }
 
     #submissionWrapper {
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
+
+        :global(.imageComponent) {
+            height: 10rem;
+        }
     }
 </style>
diff --git a/frontend/src/screens/game/Voting.svelte b/frontend/src/screens/game/Voting.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+import Image from "../../assets/Image.svelte";
+
     import TopicDisplay from "../../assets/TopicDisplay.svelte";
     import { ws, submissions, gifSubmitted } from "../../store";
 
@@ -24,7 +26,7 @@
                 </svg>
             {/if}
 
-            <img class="img" src={submission} alt="" />
+            <Image width="auto" height="auto" src={submission} alt="" />
             <div class="background" />
             <div id="{i === gifVoted ? 'votedGif' : ''}" data-url={submission} on:click={e => submitVote(e, i)} class="overlay" />
         </div>
@@ -54,7 +56,7 @@
             }
         }
 
-        .img {
+        :global(.imageComponent) {
             width: clamp(200px, 20vw, 400px);
             z-index: 1;
         }

diff --git a/frontend/src/screens/game/VotingResults.svelte b/frontend/src/screens/game/VotingResults.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import Avatar from "../../assets/Avatar.svelte";
+import Image from "../../assets/Image.svelte";
     import TopicDisplay from "../../assets/TopicDisplay.svelte";
     import { leader, votingResults, ws } from "../../store";
 
@@ -13,7 +14,7 @@
 <div class="resultWrapper">
     {#each $votingResults as result}
         <div class="votingResult">
-            <img src={result.url} alt="Image of {result.creator}" />
+            <Image width="auto" height="auto" src={result.url} alt="Image of {result.creator}" />
             <div class="overlayWrapper {result.voters.length === maxVotes ? 'first' : result.voters.length > 0 ? 'second' : ''}">
                 {#if result.voters.length === maxVotes}
                     <svg
@@ -154,7 +155,7 @@
         justify-content: center;
         border-radius: .5rem;
 
-        img {
+        :global(.imageComponent) {
             width: 100%;
         }
     }