Update docs to remove mentions of phx-page-loading (#3740)

* update bindings guide

* update syncing-changes guide

* update view test

* Update bindings.md

Co-authored-by: Steffen Deusch <[email protected]>

---------

Co-authored-by: Steffen Deusch <[email protected]>

Author: SerhiiFesenko

assets/test/view_test.js

@@ -1331,7 +1331,7 @@ describe("View + Component", function(){
     test("restores phx specific attributes awaiting a ref", () => {
       let content = `
         <span data-phx-ref-loading="1" data-phx-ref-src="root"></span>
-        <form phx-change="suggest" phx-submit="search" phx-page-loading="" class="phx-submit-loading" data-phx-ref-loading="38" data-phx-ref-src="root">
+        <form phx-change="suggest" phx-submit="search" class="phx-submit-loading" data-phx-ref-loading="38" data-phx-ref-src="root">
           <input type="text" name="q" value="ddsdsd" placeholder="Live dependency search" list="results" autocomplete="off" data-phx-readonly="false" readonly="" class="phx-submit-loading" data-phx-ref-loading="38" data-phx-ref-src="root">
           <datalist id="results">
           </datalist>
@@ -1345,7 +1345,7 @@ describe("View + Component", function(){
       view.undoRefs(1)
       expect(el.innerHTML).toBe(`
         <span></span>
-        <form phx-change="suggest" phx-submit="search" phx-page-loading="" class="phx-submit-loading" data-phx-ref-src="root" data-phx-ref-loading="38">
+        <form phx-change="suggest" phx-submit="search" class="phx-submit-loading" data-phx-ref-src="root" data-phx-ref-loading="38">
           <input type="text" name="q" value="ddsdsd" placeholder="Live dependency search" list="results" autocomplete="off" data-phx-readonly="false" readonly="" class="phx-submit-loading" data-phx-ref-src="root" data-phx-ref-loading="38">
           <datalist id="results">
           </datalist>
@@ -1356,7 +1356,7 @@ describe("View + Component", function(){
       view.undoRefs(38)
       expect(el.innerHTML).toBe(`
         <span></span>
-        <form phx-change="suggest" phx-submit="search" phx-page-loading="">
+        <form phx-change="suggest" phx-submit="search">
           <input type="text" name="q" value="ddsdsd" placeholder="Live dependency search" list="results" autocomplete="off">
           <datalist id="results">
           </datalist>

guides/client/bindings.md

@@ -434,9 +434,8 @@ Our `paginate_posts` function fetches a page of posts, and determines if the use
 <ul
   id="posts"
   phx-update="stream"
-  phx-viewport-top={@page > 1 && "prev-page"}
-  phx-viewport-bottom={!@end_of_timeline? && "next-page"}
-  phx-page-loading
+  phx-viewport-top={@page > 1 && JS.push("prev-page", page_loading: true)}
+  phx-viewport-bottom={!@end_of_timeline? && JS.push("next-page", page_loading: true)}
   class={[
     if(@end_of_timeline?, do: "pb-10", else: "pb-[calc(200vh)]"),
     if(@page == 1, do: "pt-10", else: "pt-[calc(200vh)]")

guides/client/syncing-changes.md

@@ -211,7 +211,7 @@ key, with a value that depends on the triggering event:
   - `"element"` - the event was triggered by a `phx-` bound element, such as `phx-click`
   - `"error"` - the event was triggered by an error, such as a view crash or socket disconnection
 
-Additionally, any `phx-` event may dispatch page loading events by annotating the DOM element with the `phx-page-loading` attribute.
+Additionally, `Phoenix.LiveView.JS.push/3` may dispatch page loading events by passing `page_loading: true` option.
 
 For all kinds of page loading events, all but `"element"` will receive an additional `to` key in the info metadata pointing to the href associated with the page load. In the case of an `"element"` page loading event, the info will contain a `"target"` key containing the DOM element which triggered the page loading state.