edit: ajout d'une animation pour le reload du contenu génératif (qq valeurs à régler peut être)

src/assets/style.css

@@ -12,7 +12,9 @@
 }
 
 :root[data-theme="green"]{
-  --dark-color: #004D33;
+  --dark-color-overlay: 0 77 51;
+  --accent-color-overlay: 230 0 230;
+  --dark-color:#004D33;
   --darker-color: #000D07;
   --light-color: #33FF77;
   --accent-color: #E600E6;
@@ -172,11 +174,11 @@ p{
 }
 
 @keyframes blink {
-  0%   { border-color: var(--accent-color);}
-  25%  { border-color: var(--dark-color);}
-  50%  { border-color: var(--accent-color);}
-  75%  { border-color: var(--dark-color);}
-  100%  { border-color: var(--accent-color);}
+  0%   { background-color: rgba(var(--dark-color-overlay)/33.3%);}
+  25%  { background-color: rgba(var(--accent-color-overlay)/33.3%);}
+  50%  { background-color: rgba(var(--dark-color-overlay)/33.3%);}
+  75%  { background-color: rgba(var(--accent-color-overlay)/33.3%);}
+  100%  { background-color: rgba(var(--dark-color-overlay)/33.3%);}
 }
 
 /*==========================Moveable*/

src/components/GeneratedContent.vue

@@ -1,5 +1,8 @@
 <template>
   <div id="generatorContainer" ref="generatorContainer">
+    <div class="loadingOverlay" v-show="overlayIsActive">
+      <p class="floating" id="loadingOText">Loading...</p>
+    </div>
     <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2, graffStyle: item.isHighlight===3}" v-for="item in partOneItem" :key="item.id" :style="{
                                                                                                 left: item.x + 'px',
                                                                                                 top: item.y + 'px'
@@ -26,6 +29,28 @@
 
 <style scoped>
   /*=====================Generated Content CSS*/
+  .loadingOverlay{
+    position: relative;
+    margin-top: 4%;
+    width: 97%;
+    height: 93%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    z-index: 333;
+    border-radius: 0 16.1px 16.1px 0;
+    pointer-events: none;
+    animation: blink 3.33s ease-in-out infinite;
+  }
+  #loadingOText{
+    position:relative;
+    z-index: 334;
+    font-family: 'lineal';
+    font-size: 33.3px;
+    color: var(--light-color);
+  }
+
   #generatorContainer{
     pointer-events: none;
     position:absolute;
@@ -101,7 +126,7 @@
 
       }
 
-  /*=============== (prononcé avec l'intonation de grouz) format moyen mes couilles là*/
+  /*=============== (*prononcé avec l'intonation de grouz*) format moyen mes couilles là*/
   @media (max-width:800px){
         .imgStyle{
           width:77px;
@@ -195,7 +220,8 @@
         partTwoItem:[],
         partThreeItem:[],
         containerWidth:0,
-        containerHeight:0
+        containerHeight:0,
+        overlayIsActive: false
       }
     },
     computed:{
@@ -213,6 +239,9 @@
       }
     },
     methods:{
+      delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+      },
       getRandomInt(min,max){
         min=Math.ceil(min)
         max=Math.floor(max)
@@ -376,6 +405,19 @@
         this.genCoord(this.partTwoItem);
         this.genCoord(this.partThreeItem);
         console.log('Content has been generated!');
+      },
+      startContentReload(){
+        this.reloadContentAnimation();
+      },
+      async reloadContentAnimation() {
+        this.overlayIsActive = true;
+        for (let i = 0; i < 34; i++) {
+          this.generateContent();
+          await this.delay(50);
+          if(i===33){
+            this.overlayIsActive = false;
+          };
+        }
       }
     },
     mounted(){

src/components/MainContent.vue

@@ -83,7 +83,7 @@
     },
     methods: {
       reloadContent(){
-        this.$refs.generator.generateContent();
+        this.$refs.generator.startContentReload();
       }
     },
     mounted(){