Stopping and delaying in calling/finding a long list in the liveview component

shahryarjb · March 19, 2023, 11:59am

Hello, I have a long list which is hard coded in my project you can find it: mishka_template_creator/tailwind_setting.ex at master · mishka-group/mishka_template_creator · GitHub

When I want to find something in the list, I use these functions:

github.com

mishka-group/mishka_template_creator/blob/master/lib/mishka_template_creator/data/tailwind_setting.ex#L8532-L8562


      
          def get_form_options(id, nil) do
            found_section = elem(Enum.find(call(), &(elem(&1, 0) == id)), 3)
          
          
  {field_id, field_title, field_description, field_configs, field_allowed_types} =
              List.first(found_section)
          
          
  %{
              section: found_section,
              form_id: field_id,
              form_title: field_title,
              form_description: field_description,
              types: field_allowed_types,
              form_configs: field_configs
            }
          end
          
          
def get_form_options(id, child) do
            found_section = elem(Enum.find(call(), &(elem(&1, 0) == id)), 3)
          
          
  {field_id, field_title, field_description, field_configs, field_allowed_types} =

This file has been truncated. show original

and call it in my Phoenix LiveView component:

  attr :id, :string, required: true
  attr :child, :string, required: false, default: nil

  defp create_form(%{id: id, child: child} = assigns) do
    assigns = assign(assigns, :selected_setting, TailwindSetting.get_form_options(id, child))

You can find this function in my code:

github.com

mishka-group/mishka_template_creator/blob/master/lib/mishka_template_creator/components/blocks/settings.ex#L93-L94


      
          defp create_form(%{id: id, child: child} = assigns) do
            assigns = assign(assigns, :selected_setting, TailwindSetting.get_form_options(id, child))

Now the problem, for example if I find border-color in the list (first link), phoenix liveview sends request to backend with a delay

I recorded a video you can see:

https://user-images.githubusercontent.com/8413604/226173567-ab2c5c2a-65c6-47c2-8357-49aa290e14f0.mp4

As you see when I clicked in border-color section which is very long and has many items, it is going to send a request with a delay, what is your solution?

I think there is no problem in the Elixir part, and it is getting faster, but the request from JavaScript phx-click seems to be sent with delay.

Because its calculation is very fast when the HTML is not created. I don’t know how to use LiveView stream or temporary_assign in a component

link: mishka_template_creator/settings.ex at master · mishka-group/mishka_template_creator · GitHub

Thank you in advance

shahryarjb · March 19, 2023, 4:32pm

Some of the solutions that come to my mind are these. Because there is a lot of HTML on the page, I think it is slow.

For example, I will create a list of 50 items, and when the user clicks the more button, another 50 items will be added to the list.
The same solution as above, but send more items with hook to JS DOM to add to HTML
Show 10 numbers in total, and the user can find the rest by searching.

Do you have another solution in mind to load a lot of HTML in the user’s browser? Pay attention to this item, this item is in the component and I can’t use LiveView stream.

Thank you