From 34d3da2a06a0bc54e7c4a7375ba25a7551db6685 Mon Sep 17 00:00:00 2001
From: HolgerHatGarKeineNode <fsociety.mkv@pm.me>
Date: Wed, 23 Aug 2023 14:56:02 +0200
Subject: [PATCH] nostr plebs animation added

---
 resources/lang/de.json                        |  2 +-
 .../livewire/nostr/plebs-overview.blade.php   | 19 +++++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/resources/lang/de.json b/resources/lang/de.json
index 7a1727a1..1c48ea72 100644
--- a/resources/lang/de.json
+++ b/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"
diff --git a/resources/views/livewire/nostr/plebs-overview.blade.php b/resources/views/livewire/nostr/plebs-overview.blade.php
index e77de99d..0c662bf6 100644
--- a/resources/views/livewire/nostr/plebs-overview.blade.php
+++ b/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,8 +161,10 @@
                     </p>
                 @endauth
                 <p class="mt-8">
-                    <x-button x-show="!currentUser" primary label="{{ __('NIP-07 Login') }}" icon="login"
-                              @click="login()"/>
+                    <x-button
+                        ::disabled="loading"
+                        x-show="!currentUser" primary label="{{ __('NIP-07 Login') }}" icon="login"
+                        @click="login()"/>
                 </p>
                 <p class="text-gray-100">
                     <span>{{ __('Log in with your Nostr Extension so you can follow all plebs with one click.') }}</span>
@@ -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>