nostr plebs animation added

resources/lang/de.json

@@ -884,7 +884,7 @@
     "An overview of all Einundzwanzig plebs who have shared their npub.": "Eine Übersicht aller Einundzwanzig Plebs, die ihre npub geteilt haben.",
     "Go to your profile and add your Nostr-npub. After that you can also log in with Nostr here on the portal.": "Gehe zu deinem Profil und füge deine Nostr-npub hinzu. Danach kannst du dich auch hier auf dem Portal mit Nostr einloggen.",
     "NIP-07 Login": "",
-    "Logged into Nostr as:": "Eingeoggt in Nostr als:",
+    "Logged into Nostr as:": "Eingeloggt in Nostr als:",
     "NPUB copied!": "NPUB kopiert!",
     "Successfully followed all nostr plebs": "Erfolgreich alle Nostr Plebs gefolgt",
     "Follow all": "Folge allen"

resources/views/livewire/nostr/plebs-overview.blade.php

@@ -112,6 +112,9 @@
                 let counter = 1;
                 for (const pleb of this.plebs) {
                     const follow = await this.currentUser.follow(pleb);
+                    this.char = -1;
+                    this.text = 'Followed ' + pleb.profile.name + '!';
+                    this.animate();
                     console.log(follow);
                     this.width = Math.round(counter / length * 100);
                     counter++;
@@ -158,7 +161,9 @@
                     </p>
                 @endauth
                 <p class="mt-8">
-                    <x-button x-show="!currentUser" primary label="{{ __('NIP-07 Login') }}" icon="login"
+                    <x-button
+                        ::disabled="loading"
+                        x-show="!currentUser" primary label="{{ __('NIP-07 Login') }}" icon="login"
                         @click="login()"/>
                 </p>
                 <p class="text-gray-100">
@@ -226,13 +231,18 @@
                         >
                         </div>
                     </div>
-                    <img src="{{ asset('img/running-nostr.gif') }}" alt="running-nostr" class="mt-2 block text-sm font-semibold text-gray-900"/>
+                    <img src="{{ asset('img/running-nostr.gif') }}" alt="running-nostr"
+                         class="mt-2 block text-sm font-semibold text-gray-900"/>
                     <span class="mt-2 block text-sm font-semibold text-gray-100">Loadingstr...</span>
                 </div>
 
                 <div
                     x-show="loadingFollow"
                     class="relative block w-full rounded-lg border-2 border-dashed border-purple-300 p-12 text-center hover:border-purple-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                    <template x-for="(c, i) in text.split('')"><span
+                            x-text="c"
+                            class="opacity-0 transition ease-in text-2xl text-white"
+                            :class="{'opacity-100':char>=i}"></span></template>
                     <div
                         class="bg-purple-200 rounded h-6 mt-5"
                         role="progressbar"
@@ -247,7 +257,8 @@
                         >
                         </div>
                     </div>
-                    <img src="{{ asset('img/running-nostr.gif') }}" alt="running-nostr" class="mt-2 block text-sm font-semibold text-gray-900"/>
+                    <img src="{{ asset('img/running-nostr.gif') }}" alt="running-nostr"
+                         class="mt-2 block text-sm font-semibold text-gray-900"/>
                     <span class="mt-2 block text-sm font-semibold text-gray-100">Followstr...</span>
                 </div>