Changing the messages, the p tags, to components gave me a definite improvement on that front. Not seeing 500ms times any more, though still getting a lot of 100ms+ layout reflows.
I’ve removed anything that isn’t structural from the following template, but this is what the base LiveView component looks like that takes up the whole page:
<div name="client" class="w-screen h-screen flex flex-row overflow-hidden max-h-screen" phx-window-keyup="hotkey">
<div class="w-1/5 flex flex-col">
<div class="flex flex-1 border-4"></div>
<div class="flex flex-col flex-1 border-4">
<ul class="flex">
<li class="flex-1 mr-2">
<a class="text-center block border border-blue-500 rounded py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white" href="#">Inventory</a>
</li>
<li class="flex-1 mr-2">
<a class="text-center block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4" href="#">Skills</a>
</li>
<li class="text-center flex-1">
<a class="block py-2 px-4 text-gray-400 cursor-not-allowed" href="#">Settings</a>
</li>
</ul>
<div class="flex flex-1 bg-gray-600 p-2">
<%= live_component @socket, MudWeb.Live.Component.CharacterInventory, id: :character_inventory, inventory: @client_data.inventory %>
</div>
</div>
</div>
<div class="w-3/5 flex flex-col">
<div id="story" phx-hook="Story" class="border-4 border-r-0 min-w-full flex-1 flex flex-col overflow-y-scroll">
<div phx-update="append" class="flex flex-col flex-1 min-w-full p-2 font-extrabold font-story overflow-y-auto">
<%= for message <- @messages do %>
<%= live_component @socket, MudWeb.Live.Component.StoryMessage, message: message %>
<% end %>
</div>
<div id="scroll-to-bottom" phx-hook="ScrollToBottom" class="h-px"></div>
</div>
<div class="h-8 flex flex-col">
<%= live_component @socket, MudWeb.Live.Component.CommandPrompt, input: @input %>
</div>
</div>
<div class="w-1/5 flex flex-col">
<div class="flex flex-1 border-4"></div>
<div class="flex flex-1 border-4">
<ul class="flex flex-1">
<li class="flex flex-1 mr-2">
<a class="text-center block border border-blue-500 rounded py-2 px-4 bg-blue-500 hover:bg-blue-700 text-white" href="#">Active Item</a>
</li>
<li class="flex flex-1 mr-2">
<a class="text-center block border border-white rounded hover:border-gray-200 text-blue-500 hover:bg-gray-200 py-2 px-4" href="#">Nav Item</a>
</li>
<li class="flex flex-1">
<a class="block text-center py-2 px-4 text-gray-400 cursor-not-allowed" href="#">Disabled Item</a>
</li>
</ul>
</div>
</div>
</div>
This is the CommandPrompt template:
<%= form_for @input, "#", [phx_submit: :submit_input, class: "flex flex-col flex-1"], fn _f -> %>
<%= text_input :input, :content, phx_hook: "Input", phx_blur: "stop_typing", placeholder: "Enter Commands Here...", class: "min-w-full rounded-lg resize-y min-h-full", autocomplete: "off" %>
<% end %>
This is the StoryMessage:
<%= raw(@message) %>
Is this about all I can do from a basic LiveView standpoint as far as client performance while appending to the primary message window is concerned? The delay still isn’t fantastic, but it’s at least tolerable. Would love to target sub 100ms interactions consistently though, so if I need to get fancy I will.
