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

Questions & Help Questions
,
1

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

When I want to find something in the list, I use these functions:
https://github.com/mishka-group/mishka_template_creator/blob/master/lib/mishka_template_creator/data/tailwind_setting.ex#L8532-L8562

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:
https://github.com/mishka-group/mishka_template_creator/blob/master/lib/mishka_template_creator/components/blocks/settings.ex#L93-L94

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: https://github.com/mishka-group/mishka_template_creator/blob/master/lib/mishka_template_creator/components/blocks/settings.ex#L136-L177

Thank you in advance

2

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.

  1. 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.
  2. The same solution as above, but send more items with hook to JS DOM to add to HTML
  3. 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