Fixed infinite scroll

Author: ericmj

assets/css/app.css

@@ -408,6 +408,34 @@ table.package-list .button {
   font-weight: 600;
 }
 
+#loading-trigger {
+  height: 60px;
+  width: 100%;
+  margin: 30px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+#loading-trigger::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  border: 2px solid #f3f3f3;
+  border-top: 2px solid #888;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-right: 10px;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 
 
 @media only screen

assets/js/app.js

@@ -14,7 +14,40 @@ import "phoenix_html"
 import { Socket } from 'phoenix'
 import { LiveSocket } from "phoenix_live_view"
 
-let liveSocket = new LiveSocket("/live", Socket, {})
+// Define hooks for LiveView
+window.Hooks = {}
+
+window.Hooks.InfiniteScroll = {
+  mounted() {
+    this.pending = false
+
+    this.observer = new IntersectionObserver((entries) => {
+      const target = entries[0]
+      if (target.isIntersecting && !this.pending) {
+        this.pending = true
+        this.pushEvent("load-more", {})
+      }
+    }, {
+      root: null,
+      rootMargin: '100px',
+      threshold: 0.1
+    })
+
+    this.observer.observe(this.el)
+  },
+
+  destroyed() {
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+  },
+
+  updated() {
+    this.pending = false
+  }
+}
+
+let liveSocket = new LiveSocket("/live", Socket, { hooks: window.Hooks })
 liveSocket.connect()
 
 /*

lib/diff/storage/local.ex

@@ -81,7 +81,19 @@ defmodule Diff.Storage.Local do
               |> String.replace_prefix(prefix, "")
               |> String.replace_suffix(".html", "")
             end)
-            |> Enum.sort()
+            |> Enum.sort_by(fn patch_id ->
+              # Extract numeric part for proper sorting (e.g., "patch-10" -> 10)
+              case String.split(patch_id, "-") do
+                ["patch", num_str] ->
+                  case Integer.parse(num_str) do
+                    {num, _} -> num
+                    :error -> 0
+                  end
+
+                _ ->
+                  0
+              end
+            end)
 
           {:ok, patch_ids}
         else

lib/diff_web/live/diff_live_view.ex

@@ -61,22 +61,13 @@ defmodule DiffWeb.DiffLiveView do
         <div class="ghd-container" id="patch-list">
           <%= for patch_id <- @loaded_patches do %>
             <div id={"patch-#{patch_id}"}>
-              <%= case Map.get(@patch_contents, patch_id) do %>
-                <% nil -> %>
-                  <div class="message-container">
-                    <div class="message">Loading patch <%= patch_id %>...</div>
-                  </div>
-                <% content -> %>
-                  <%= raw(content) %>
-              <% end %>
+              <%= raw(Map.get(@patch_contents, patch_id, "")) %>
             </div>
           <% end %>
 
           <%= if @has_more_patches do %>
-            <div class="message-container">
-              <button phx-click="load-more" class="diff-button button">
-                Load more patches
-              </button>
+            <div id="loading-trigger" phx-hook="InfiniteScroll" data-loaded={length(@loaded_patches)}>
+              Loading more patches...
             </div>
           <% end %>
         </div>
@@ -215,18 +206,17 @@ defmodule DiffWeb.DiffLiveView do
   defp resolve_latest_version(_package, from, to), do: {:ok, from, to}
 
   def handle_event("load-more", _params, socket) do
-    batch_size = 10
+    batch_size = 5
     {next_batch, remaining} = Enum.split(socket.assigns.remaining_patches, batch_size)
 
     socket =
       socket
       |> assign(
-        loaded_patches: socket.assigns.loaded_patches ++ next_batch,
         remaining_patches: remaining,
         has_more_patches: length(remaining) > 0
       )
 
-    send(self(), {:load_patches, next_batch})
+    send(self(), {:load_patches_and_update, next_batch})
 
     {:noreply, socket}
   end
@@ -292,22 +282,60 @@ defmodule DiffWeb.DiffLiveView do
       {:noreply, assign(socket, error: "Invalid diff", generating: false)}
   end
 
-  def handle_info({:load_patches, patch_ids}, socket) do
+  def handle_info({:load_patches_and_update, patch_ids}, socket) do
     %{package: package, from: from, to: to} = socket.assigns
 
     loaded_contents =
       patch_ids
       |> Enum.reduce(%{}, fn patch_id, acc ->
         case Diff.Storage.get_patch(package, from, to, patch_id) do
           {:ok, content} ->
-            Map.put(acc, patch_id, content)
+            sanitized_content = sanitize_utf8(content)
+            Map.put(acc, patch_id, sanitized_content)
 
           {:error, reason} ->
             Logger.error("Failed to load patch #{patch_id}: #{inspect(reason)}")
             Map.put(acc, patch_id, "<div class='patch-error'>Failed to load patch</div>")
         end
       end)
 
+    # Update BOTH loaded_patches AND patch_contents in ONE DOM update
+    new_loaded_patches = socket.assigns.loaded_patches ++ patch_ids
+
+    socket =
+      socket
+      |> assign(
+        loaded_patches: new_loaded_patches,
+        patch_contents: Map.merge(socket.assigns.patch_contents, loaded_contents),
+        loading: false
+      )
+
+    {:noreply, socket}
+  end
+
+  def handle_info({:load_patches, patch_ids}, socket) do
+    %{package: package, from: from, to: to} = socket.assigns
+
+    Logger.info("📦 Actually loading patch content for: #{inspect(patch_ids)}")
+
+    loaded_contents =
+      patch_ids
+      |> Enum.reduce(%{}, fn patch_id, acc ->
+        case Diff.Storage.get_patch(package, from, to, patch_id) do
+          {:ok, content} ->
+            # Ensure content is valid UTF-8 to prevent JSON encoding errors
+            sanitized_content = sanitize_utf8(content)
+            Logger.info("✅ Successfully loaded patch #{patch_id} (#{byte_size(content)} bytes)")
+            Map.put(acc, patch_id, sanitized_content)
+
+          {:error, reason} ->
+            Logger.error("❌ Failed to load patch #{patch_id}: #{inspect(reason)}")
+            Map.put(acc, patch_id, "<div class='patch-error'>Failed to load patch</div>")
+        end
+      end)
+
+    Logger.info("🎯 Loaded #{map_size(loaded_contents)} patches, updating socket assigns")
+
     socket =
       socket
       |> assign(
@@ -336,6 +364,7 @@ defmodule DiffWeb.DiffLiveView do
             if patch.chunks != [] do
               patch_html =
                 Phoenix.View.render_to_string(DiffWeb.RenderView, "patch.html", patch: patch)
+                |> sanitize_utf8()
 
               patch_id = "patch-#{index}"
 
@@ -360,6 +389,7 @@ defmodule DiffWeb.DiffLiveView do
           {:too_large, file_path} ->
             too_large_html =
               Phoenix.View.render_to_string(DiffWeb.RenderView, "too_large.html", file: file_path)
+              |> sanitize_utf8()
 
             patch_id = "patch-#{index}"
 
@@ -440,6 +470,32 @@ defmodule DiffWeb.DiffLiveView do
   defp parse_version(""), do: {:ok, :latest}
   defp parse_version(input), do: Version.parse(input)
 
+  defp sanitize_utf8(content) when is_binary(content) do
+    # Replace invalid UTF-8 bytes with replacement character
+    case String.valid?(content) do
+      true ->
+        content
+
+      false ->
+        # Convert to UTF-8, replacing invalid bytes
+        content
+        |> :unicode.characters_to_binary(:latin1, :utf8)
+        |> case do
+          result when is_binary(result) ->
+            result
+
+          _ ->
+            # If conversion fails, scrub invalid bytes
+            content
+            |> String.codepoints()
+            |> Enum.filter(&String.valid?/1)
+            |> Enum.join()
+        end
+    end
+  end
+
+  defp sanitize_utf8(content), do: content
+
   defp parse_diff(diff) do
     case String.split(diff, ":", trim: true) do
       [app, from, to] -> {app, from, to, build_url(app, from, to)}