refactor: update load more indicator to use data attribute

- Replaced the id "load-more-indicator" with a data attribute "data-load-more-indicator" across multiple components to improve consistency and facilitate better targeting in JavaScript.
- Adjusted related logic in the app to ensure proper functionality with the new data attribute.

Author: zcesur

assets/js/app.ts

@@ -486,7 +486,9 @@ const Hooks = {
       );
 
       // Look for the indicator inside this.el rather than document-wide
-      const loadMoreIndicator = this.el.querySelector("#load-more-indicator");
+      const loadMoreIndicator = this.el.querySelector(
+        "[data-load-more-indicator]"
+      );
       if (loadMoreIndicator) {
         this.observer.observe(loadMoreIndicator);
       }

lib/algora_web/live/bounties_live.ex

@@ -141,7 +141,7 @@ defmodule AlgoraWeb.BountiesLive do
         <% else %>
           <div id="bounties-container" phx-hook="InfiniteScroll">
             <.bounties bounties={@bounties} />
-            <div :if={@has_more_bounties} class="flex justify-center mt-4" id="load-more-indicator">
+            <div :if={@has_more_bounties} class="flex justify-center mt-4" data-load-more-indicator>
               <div class="animate-pulse text-muted-foreground">
                 <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
               </div>

lib/algora_web/live/org/bounties_live.ex

@@ -217,7 +217,7 @@ defmodule AlgoraWeb.Org.BountiesLive do
             </tbody>
           </table>
         </div>
-        <div :if={@has_more_bounties} class="flex justify-center mt-4" id="load-more-indicator">
+        <div :if={@has_more_bounties} class="flex justify-center mt-4" data-load-more-indicator>
           <div class="animate-pulse text-gray-400">
             <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
           </div>
@@ -261,7 +261,7 @@ defmodule AlgoraWeb.Org.BountiesLive do
             </div>
           </div>
         <% end %>
-        <div :if={@has_more_transactions} class="flex justify-center mt-4" id="load-more-indicator">
+        <div :if={@has_more_transactions} class="flex justify-center mt-4" data-load-more-indicator>
           <div class="animate-pulse text-gray-400">
             <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
           </div>

lib/algora_web/live/org/dashboard_live.ex

@@ -384,7 +384,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
                 <div
                   :if={@has_more_bounties}
                   class="flex justify-center mt-4"
-                  id="load-more-indicator"
+                  data-load-more-indicator
                 >
                   <div class="animate-pulse text-muted-foreground">
                     <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
@@ -447,7 +447,7 @@ defmodule AlgoraWeb.Org.DashboardLive do
               <div
                 :if={@has_more_transactions}
                 class="flex justify-center mt-4"
-                id="load-more-indicator"
+                data-load-more-indicator
               >
                 <div class="animate-pulse text-gray-400">
                   <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />

lib/algora_web/live/orgs_live.ex

@@ -117,7 +117,7 @@ defmodule AlgoraWeb.OrgsLive do
               </li>
             <% end %>
           </ul>
-          <div :if={@has_more_orgs} class="flex justify-center mt-4" id="load-more-indicator">
+          <div :if={@has_more_orgs} class="flex justify-center mt-4" data-load-more-indicator>
             <div class="animate-pulse text-muted-foreground">
               <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
             </div>

lib/algora_web/live/user/dashboard_live.ex

@@ -128,7 +128,7 @@ defmodule AlgoraWeb.User.DashboardLive do
           <%= if length(@bounties) > 0 do %>
             <div id="bounties-container" phx-hook="InfiniteScroll">
               <.bounties bounties={@bounties} />
-              <div :if={@has_more_bounties} class="flex justify-center mt-4" id="load-more-indicator">
+              <div :if={@has_more_bounties} class="flex justify-center mt-4" data-load-more-indicator>
                 <div class="animate-pulse text-muted-foreground">
                   <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />
                 </div>

lib/algora_web/live/user/profile_live.ex

@@ -167,7 +167,7 @@ defmodule AlgoraWeb.User.ProfileLive do
             <div
               :if={@has_more_transactions}
               class="flex justify-center mt-4"
-              id="load-more-indicator"
+              data-load-more-indicator
             >
               <div class="animate-pulse text-muted-foreground">
                 <.icon name="tabler-loader" class="h-6 w-6 animate-spin" />