WIP: Improve Nostr user metadata fetching

Use a multi-step process, caching results in between, while informing
the user about the current steps/progress

app/views/settings/_nostr.html.erb

@@ -88,8 +88,15 @@
   </section>
 
   <% if current_user.nostr_pubkey.present? %>
-    <%= turbo_frame_tag "nostr_user_metadata", src: nostr_user_metadata_settings_path do %>
-      <p>Loading...</p>
-    <% end %>
+    <div data-controller="nostr-metadata"
+         data-nostr-metadata-url-value="<%= nostr_metadata_settings_path %>">
+      <div data-nostr-metadata-target="loading"
+           class="flex flex-col items-center justify-center py-16">
+        <div class="mb-4 h-12 w-12"></div>
+        <p data-nostr-metadata-target="status"
+           class="text-gray-500 animate-pulse">Loading…</p>
+      </div>
+      <div data-nostr-metadata-target="content" class="hidden"></div>
+    </div>
   <% end %>
 </div>

app/views/settings/_nostr_metadata.html.erb

@@ -0,0 +1,25 @@
+<section class="">
+  <h3>Profile</h3>
+  <%= render Settings::NostrProfileStatusComponent.new(
+    profile_event: @profile,
+    user_address: current_user.address
+  ) %>
+  <div class="mt-8" data-controller="modal" data-action="keydown.esc->modal#close">
+    <button data-action="click->modal#open" class="btn-md btn-blue w-full sm:w-auto">
+      Edit profile
+    </button>
+    <%= render ModalComponent.new(show_close_button: false) do %>
+      <%= render Settings::NostrEditProfileComponent.new(
+        user: current_user,
+        profile_event: @profile
+      ) %>
+    <% end %>
+  </div>
+</section>
+
+<section class="mb-8 sm:mb-12">
+  <h3>Relays</h3>
+  <%= render Settings::NostrRelayStatusComponent.new(
+    nip65_event: @nip65_event
+  ) %>
+</section>

app/views/settings/_nostr_user_metadata.html.erb

@@ -1,27 +0,0 @@
-<%= turbo_frame_tag "nostr_user_metadata" do %>
-  <section>
-    <h3>Relays</h3>
-    <%= render Settings::NostrRelayStatusComponent.new(
-      nip65_event: @nip65_event
-    ) %>
-  </section>
-
-  <section>
-    <h3>Profile</h3>
-    <%= render Settings::NostrProfileStatusComponent.new(
-      profile_event: @profile,
-      user_address: current_user.address
-    ) %>
-    <div class="mt-8" data-controller="modal" data-action="keydown.esc->modal#close">
-      <button data-action="click->modal#open" class="btn-md btn-blue w-full sm:w-auto">
-        Edit profile
-      </button>
-      <%= render ModalComponent.new(show_close_button: false) do %>
-        <%= render Settings::NostrEditProfileComponent.new(
-          user: current_user,
-          profile_event: @profile
-        ) %>
-      <% end %>
-    </div>
-  </section>
-<% end %>