[IMP] website: avoid fetching page dependencies with each key press

The `PageDependencies` obtains the page dependencies from the server
during its `onWillStart`. If the parent component state changes before
the component is mounted, Owl destroys and creates a new one.
This is the case if the server response is not obtained before the
value of the URL field is modified again.
Because of this, if the user types quickly in the URL field, an RPC
is sent for each key press.

This commit obtains the dependencies in a `useEffect` that is run only
once (instead of inside the `onWillStart`), and only after the
component is mounted. It stores them in the `state` so that they are
rendered once they are obtained.

Steps to reproduce:
- Open Website > Site > This page > Properties.
- Type quickly in the URL field.

=> One RPC was sent per key press.

task-3169376

closes odoo/odoo#127125

X-original-commit: a65d8811119f4d1a044be3e140fd0c27ad1cf823
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

addons/website/static/src/components/dialog/page_properties.js

@@ -9,7 +9,7 @@ import {WebsiteDialog} from './dialog';
 import {FormViewDialog} from "@web/views/view_dialogs/form_view_dialog";
 import { qweb } from 'web.core';
 
-const {Component, onWillStart, useState, xml, useRef} = owl;
+const { Component, useEffect, useState, xml, useRef } = owl;
 
 export class PageDependencies extends Component {
     setup() {
@@ -22,22 +22,44 @@ export class PageDependencies extends Component {
             this.orm = useWowlService('orm');
         }
 
-        this.dependencies = {};
-        this.depText = '...';
         this.action = useRef('action');
         this.sprintf = sprintf;
 
-        onWillStart(() => this.onWillStart());
+        useEffect(
+            () => {
+                this.onWillStart();
+            },
+            () => []
+        );
+        this.state = useState({
+            dependencies: {},
+            depText: "...",
+        });
     }
 
     async onWillStart() {
-        this.dependencies = await this.orm.call(
+        // TODO Remove in master: call fetchDependencies in useEffect.
+        return this.fetchDependencies();
+    }
+
+    // TODO Remove in master: use state from template.
+    get dependencies() {
+        return this.state.dependencies;
+    }
+
+    // TODO Remove in master: use state from template.
+    get depText() {
+        return this.state.depText;
+    }
+
+    async fetchDependencies() {
+        this.state.dependencies = await this.orm.call(
             'website',
             'search_url_dependencies',
             [this.props.resModel, this.props.resIds],
         );
         if (this.props.mode === 'popover') {
-            this.depText = Object.entries(this.dependencies)
+            this.state.depText = Object.entries(this.state.dependencies)
                 .map(dependency => `${dependency[1].length} ${dependency[0].toLowerCase()}`)
                 .join(', ');
         }
@@ -49,7 +71,9 @@ export class PageDependencies extends Component {
             boundary: 'viewport',
             placement: 'right',
             trigger: 'focus',
-            content: qweb.render('website.PageDependencies.Tooltip', {dependencies: this.dependencies}),
+            content: qweb.render("website.PageDependencies.Tooltip", {
+                dependencies: this.state.dependencies,
+            }),
         }).popover('toggle');
     }
 }