Remove jQuery AJAX from the repo editor

[yardenshoham]

Preview Tab

• Removed the jQuery AJAX call and replaced with our fetch wrapper
• Tested the preview tab functionality and it works as before

Diff Tab

• Removed the jQuery AJAX call and replaced with htmx
• Tested the diff tab functionality and it works as before

htmx Attributes

• hx-post="{{.RepoLink}}...": make a POST request to the endpoint
• hx-indicator=".tab[data-tab='diff']": attach the loading indicator to the tab body
• hx-target=".tab[data-tab='diff']": target the tab body for swapping with the response
• hx-swap="innerHTML": swap the target's inner HTML
• hx-include="#edit_area": include the value of the textarea (content) in the request body
• hx-vals='{"context":"{{.BranchLink}}"}': include the context in the request body
• hx-params="context,content": include only these keys in the request body

Demo using fetch and htmx instead of jQuery AJAX

[silverwind]

Can something be done about the loading states? How about a bit bigger spinner on both tabs 2 and 3 and like 4rem padding? Also remove the "Loading..." text on tab 3. Ideally both tabs would have the same loading state. Make it look like the mermaid loader:

[yardenshoham]

Can we maybe accept it as-is and handle style changes in a dedicated PR?

[silverwind]

Hmm there is at least one visual change in your PR, that tiny spinner on first diff preview wasn't there before. How is it triggered?

[yardenshoham]

htmx adds the is-loading class to the element that triggered the request or, if hx-indicator is specified, to the hx-indicator CSS selector

gitea/web_src/js/htmx.js

Line 8 in f6d01ac

htmx.config.requestClass = 'is-loading';

[silverwind]

Ok, can we just remove the Loading... text? It's now a duplicate indicator with that spinner being added.

[yardenshoham]

Removed loading and added an empty div with padding: 4rem;, the GIF in the description is updated