Optimize maybeHideFeedback for initial page render (#2953)

* Optimize maybeHideFeedback for initial page render

This PR optimizes the initial page render for pages containing thousands of inputs; instead of calling `DOM.all` for each input, we build a selector to match all inputs and query the DOM.

From my testing, this has reduced the page rendering time from over 30 seconds to 4-5 seconds.

* leverage feedbacks to accumulate selector

assets/js/phoenix_live_view/dom.js

@@ -285,10 +285,14 @@ let DOM = {
     }
   },
 
-  maybeHideFeedback(container, input, phxFeedbackFor){
-    if(!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))){
-      let feedbacks = [input.name]
-      if(input.name.endsWith("[]")){ feedbacks.push(input.name.slice(0, -2)) }
+  maybeHideFeedback(container, inputs, phxFeedbackFor){
+    let feedbacks = []
+    inputs.forEach(input => {
+      if(!(this.private(input, PHX_HAS_FOCUSED) || this.private(input, PHX_HAS_SUBMITTED))){
+        input.name.endsWith("[]") ? feedbacks.push(input.name.slice(0, -2)) : feedbacks.push(input.name)
+      }
+    })
+    if (feedbacks.length > 0) {
       let selector = feedbacks.map(f => `[${phxFeedbackFor}="${f}"]`).join(", ")
       DOM.all(container, selector, el => el.classList.add(PHX_NO_FEEDBACK_CLASS))
     }

assets/js/phoenix_live_view/dom_patch.js

@@ -297,9 +297,7 @@ export default class DOMPatch {
       })
     }
 
-    trackedInputs.forEach(input => {
-      DOM.maybeHideFeedback(targetContainer, input, phxFeedbackFor)
-    })
+    DOM.maybeHideFeedback(targetContainer, trackedInputs, phxFeedbackFor)
 
     liveSocket.silenceEvents(() => DOM.restoreFocus(focused, selectionStart, selectionEnd))
     DOM.dispatchEvent(document, "phx:update")