Admin: Created page with "== Example== defmodule AppWeb.PageLive do use AppWeb, :live_view alias Phoenix.LiveView.AsyncResult @impl true def mount(_params, _session, socket) do {:ok, assign_async(socket, :number, fn -> {:ok, %{number: really_complicated_function()}} end)} end @impl true def handle_event("generate_number", _, socket) do {:noreply, socket |> assign(:number, AsyncResult.loading()) |> start_async(:get_random_number, fn -> really_c..."

2024-06-29T05:07:52Z

Created page with "== Example== <source> defmodule AppWeb.PageLive do use AppWeb, :live_view alias Phoenix.LiveView.AsyncResult @impl true def mount(_params, _session, socket) do {:ok, assign_async(socket, :number, fn -> {:ok, %{number: really_complicated_function()}} end)} end @impl true def handle_event("generate_number", _, socket) do {:noreply, socket |> assign(:number, AsyncResult.loading()) |> start_async(:get_random_number, fn -> really_c..."

New page

== Example==

<source>
defmodule AppWeb.PageLive do
use AppWeb, :live_view

alias Phoenix.LiveView.AsyncResult
@impl true
def mount(_params, _session, socket) do
{:ok,
assign_async(socket, :number, fn -> {:ok, %{number: really_complicated_function()}} end)}
end

@impl true
def handle_event("generate_number", _, socket) do
{:noreply,
socket
|> assign(:number, AsyncResult.loading())
|> start_async(:get_random_number, fn -> really_complicated_function() end)}
end

@impl true
def handle_async(:get_random_number, {:ok, res}, socket) do
%{number: number} = socket.assigns
{:noreply, assign(socket, :number, AsyncResult.ok(number, res))}
end

def handle_async(:get_random_number, {:exit, _reason}, socket) do
%{number: number} = socket.assigns

{:noreply,
assign(socket, :number, AsyncResult.failed(number, "Failed to generate a number."))}
end

@impl true
def render(assigns) do
~H"""
<div class="flex justify-center items-center h-screen bg-gradient-to-r from-blue-500 to-purple-600">
<div class="text-center bg-white shadow-lg rounded-lg p-10">
<h1 class="text-4xl font-bold text-gray-800 mb-5">Random Number Generator</h1>

<.async_result :let={number} assign={@number}>
<:loading>
<div
class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full text-blue-700"
role="status"
>
<span class="visually-hidden">Loading...</span>
</div>
</:loading>
<:failed :let={_reason}>
<div class="mt-5 text-red-500">
Failed to generate a number.
</div>
</:failed>

<div class="text-6xl font-bold text-green-600 mb-5">
<%= number %>
</div>
<button
phx-click="generate_number"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105"
>
Generate Random Number
</button>
</.async_result>
</div>
</div>
"""
end

def really_complicated_function() do
# Simulate a really complicated function, takes a long time to run and will fail sometimes
:timer.sleep(1000)

if Enum.random(1..10) > 5 do
:error
else
Enum.random(1..100)
end
end
end

</source>

Phoenix LiveView Async Assigns - Revision history