chore: Align transcription loading state with loaded

lib/medical_transcription_web/components/transcription_text_component.ex

@@ -45,27 +45,27 @@ defmodule MedicalTranscriptionWeb.Components.TranscriptionTextComponent do
   @impl Phoenix.LiveComponent
   def render(assigns) do
     # TODO: Adjust the blue border when editing
-    # TODO: Style the loading state to the same as the loaded state
     # TODO: Add back the phx-blur="reclassify_transcription"
 
     ~H"""
     <div class="flex gap-12 pb-10 border-b border-[#444444]/20">
       <div class="flex-1 flex flex-col gap-4">
-        <p class="text-[32px] leading-normal font-semibold">
+        <p class="px-2 text-[32px] leading-normal font-semibold">
           <%= if !is_nil(@start_mark) && !is_nil(@end_mark) do %>
             <%= @start_mark %> - <%= @end_mark %>
           <% else %>
             Full Transcription
           <% end %>
         </p>
-        <div class="flex-1 text-[28px] leading-normal text-type-black-tertiary">
+        <div class="flex-1 w-full text-[28px] leading-normal text-type-black-tertiary">
           <.async_result :let={keywords} assign={@keywords}>
-            <:loading><%= @text %></:loading>
+            <:loading>
+              <p class="h-full min-h-full rounded p-2"><%= @text %></p>
+            </:loading>
             <p
               contenteditable
-              class="w-full text-[28px] leading-normal text-type-black-tertiary
-              border-0 focus:border-0 focus:ring-0 focus-visible:ring-0 p-2
-                rounded-lg h-full min-h-full "
+              role="textbox"
+              class="h-full min-h-full rounded p-2"
               phx-target={@myself}
             >
               <.highlight text={@text} keywords={keywords} />