-
-
Notifications
You must be signed in to change notification settings - Fork 5.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Introduce htmx and use it to avoid full page load on Subscribe
and Follow
#28908
Merged
Commits on Jan 23, 2024
-
Introduce htmx and use it to avoid full page load on
Subscribe
and ……`Follow` This change introduces htmx with the hope we could use it to make Gitea more reactive while keeping our "HTML rendered on the server" approach. - Add `htmx.js` that imports `htmx.org` and initializes error toasts - Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the `<body>` tag so every request that htmx sends is authenticated ### Error toasts in action ![errors](https://github.com/go-gitea/gitea/assets/20454870/181a1beb-1cb8-4858-abe8-fa1fc3f5b8f3) ## Don't do a full page load when clicking the subscribe button - Refactor the form around the subscribe button into its own template - Use htmx to perform the form submission - `hx-boost="true"` to prevent the default form submission behavior of a full page load - `hx-sync="this:replace"` to replace the current request (in case the button is clicked again before the response is returned) - `hx-target="this"` to replace the form tag with the new form tag - `hx-push-url="false"` to disable a change to the URL - `hx-swap="show:no-scroll"` to preserve the scroll position - Change the backend response to return a `<form>` tag instead of a redirect to the issue page ### Before ![subscribe_before](https://github.com/go-gitea/gitea/assets/20454870/cb2439a2-c3c0-425c-8d3c-5d646b1cdc28) ### After Also shows a small request loading indicator (the indicator should be worked on further in a future change) ![subscribe_after](https://github.com/go-gitea/gitea/assets/20454870/5e71a43e-9500-42af-8118-9d6441e8dc42) ## Don't do a full page load when clicking the follow button - Use htmx to perform the button request - `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST request to follow the user - `hx-target="#profile-avatar-card"` to target the card div for replacement - `hx-swap="outerHTML"` to replace the card (as opposed to its inner content) with the new card that shows the new follower count and button color - Change the backend response to return a `<div>` tag (the card) instead of a redirect to the user page ### Before ![follow_before](https://github.com/go-gitea/gitea/assets/20454870/a210b643-6e74-4ff9-8e61-d658c62edf1f) ### After ![follow_after](https://github.com/go-gitea/gitea/assets/20454870/5df04537-0dd9-4e26-a5f4-73ae11e6d976) Signed-off-by: Yarden Shoham <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for 80f33f7 - Browse repository at this point
Copy the full SHA 80f33f7View commit details -
Add
is-loading
during request and disable autoscrollSigned-off-by: Yarden Shoham <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for 2096553 - Browse repository at this point
Copy the full SHA 2096553View commit details -
Change default swap style to
outerHTML
and disable url pushSigned-off-by: Yarden Shoham <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for 90b2eb3 - Browse repository at this point
Copy the full SHA 90b2eb3View commit details
Commits on Jan 27, 2024
-
Apply spinner on entire profile
Signed-off-by: Yarden Shoham <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for 55c4706 - Browse repository at this point
Copy the full SHA 55c4706View commit details -
Configuration menu - View commit details
-
Copy full SHA for d312b30 - Browse repository at this point
Copy the full SHA d312b30View commit details -
Configuration menu - View commit details
-
Copy full SHA for 94c151c - Browse repository at this point
Copy the full SHA 94c151cView commit details
Commits on Jan 28, 2024
-
Configuration menu - View commit details
-
Copy full SHA for 5cdc587 - Browse repository at this point
Copy the full SHA 5cdc587View commit details -
Configuration menu - View commit details
-
Copy full SHA for 5e27261 - Browse repository at this point
Copy the full SHA 5e27261View commit details -
Configuration menu - View commit details
-
Copy full SHA for 5fbbaa2 - Browse repository at this point
Copy the full SHA 5fbbaa2View commit details -
Configuration menu - View commit details
-
Copy full SHA for 9d6015f - Browse repository at this point
Copy the full SHA 9d6015fView commit details
Commits on Jan 29, 2024
-
Configuration menu - View commit details
-
Copy full SHA for 910d973 - Browse repository at this point
Copy the full SHA 910d973View commit details -
Configuration menu - View commit details
-
Copy full SHA for 42b1435 - Browse repository at this point
Copy the full SHA 42b1435View commit details
Commits on Jan 30, 2024
-
Configuration menu - View commit details
-
Copy full SHA for 6859b1b - Browse repository at this point
Copy the full SHA 6859b1bView commit details -
Configuration menu - View commit details
-
Copy full SHA for 0d03be1 - Browse repository at this point
Copy the full SHA 0d03be1View commit details -
Configuration menu - View commit details
-
Copy full SHA for acc2ca8 - Browse repository at this point
Copy the full SHA acc2ca8View commit details -
Signed-off-by: Yarden Shoham <[email protected]>
Configuration menu - View commit details
-
Copy full SHA for ae3b58f - Browse repository at this point
Copy the full SHA ae3b58fView commit details
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.