Come dire se la pagina si sta caricando nel componente / widget del tema?

Sviluppatore
1

Sento di star probabilmente tralasciando qualcosa di ovvio, ma non riesco a capirlo. Ho un componente tema che carica alcuni widget e sto usando il seguente codice per ridisegnarli dopo che l’utente ha navigato a una nuova pagina (preso in prestito dai banner delle categorie)

api.decorateWidget("my-widget:after", (helper) => {
    helper.widget.appEvents.on("page:changed", () => {
      helper.widget.scheduleRerender();
    })
});

Tuttavia, questo codice attende che la nuova pagina sia caricata per aggiornare il widget. Ciò che spero di fare è nascondere il contenuto del mio widget non appena qualcuno clicca su un link per un’altra pagina, in modo simile a come la funzionalità nativa di Discourse nasconde le cose e mostra un indicatore di caricamento immediatamente al clic.

Vedo in app\assets\javascripts\discourse\app\templates\discovery.hbs che il contenitore div osserva una variabile “loading”, ma non riesco a capire da dove provenga e come “intervenire” su di essa o osservare lo stato di caricamento nel mio widget.

Apprezzo qualsiasi risposta o semplicemente un orientamento nella direzione giusta. :slight_smile:

Grazie,

Zach

1 Mi Piace
2

Ho pensato di riportare in alto questo argomento: sono disponibile a pagare un supporto premium per ottenere una risposta, se necessario.

3

Puoi descrivere brevemente quale comportamento è desiderato e su quali pagine esatte?

4

Potresti provare queueRerender() invece di scheduleRerender()

5

Grazie per le risposte, ragazzi.

Ho diverse widget che ho creato per alcune pagine di categoria e idealmente vorrei nasconderle immediatamente quando qualcuno naviga via da una pagina. Ecco una demo video di 45 secondi su Loom di ciò che sto cercando: Google Chrome - Latest Rental Cities/California topics - Afford Anything Forums - Google Chrome | Loom

@hawm Non sono sicuro che il re-render della coda sia ciò che mi serve qui, poiché non si tratta tanto di ridisegnare i miei widget, quanto piuttosto di dare ai miei widget la consapevolezza di sapere se l’applicazione globale Discourse sta caricando una nuova pagina o meno.

6

Più breve è, la condizione dovrebbe essere nel template. Ad esempio:

{{#if xyz}}
il tuo codice
{{/if}}

I template di Ember sono dinamici. Se il valore cambia, il widget verrà nascosto.

7

Sì, certo. :slight_smile: Non sto avendo difficoltà con la sintassi if/then; quello che chiedo è se esiste un modo per verificare se Discourse sta attualmente caricando una nuova pagina.

8

Penso che un modo per aggirare il problema sia intervenire sulla rotta discovery utilizzando l’API modifyClass e quindi attivare un evento personalizzato.

https://api.emberjs.com/ember/3.12/classes/Route

La variabile loading proviene dalla rotta discovery che ho menzionato sopra. Il widget collegato a plugin-outlet potrebbe non essere in grado di accedervi, poiché non viene passato come argomento; ciò dipende dalla definizione di plugin-outlet.

9

Ok, grazie mille. Farò delle ricerche e vedrò cosa trovo, e aggiornerò questa pagina con una soluzione per il futuro, se ne troverò una :slight_smile:

1 Mi Piace
10

Sono finalmente riuscito a trovare una soluzione. Ci ho messo una eternità e, a mio avviso, vale la pena integrarla nel core perché, onestamente, sembra che dovrebbe già esserci lì.

Ho aggiunto il codice qui sotto al mio componente del tema; ciò che fa è aggiungere una classe “loading” al body non appena inizia il routing e poi la rimuove non appena il routing è completato. Forse per chi conosce Ember questa cosa è semplice e ovvia, ma ci ho messo un tempo spropositato (provando un milione di cose e leggendo tutti i thread che ho trovato qui) per capirlo.

Con questo codice nel core, posso aggiungere spinner di caricamento e simili ai miei diversi widget, la cui visibilità e CSS saranno determinati dalla presenza o meno della classe CSS loading sul tag body.

initialize() {
    withPluginApi("0.8.8", (api) => {
      const router = api._lookupContainer('router:main');
      router.reopen({
        addLoadingCSSClassToBody: function() {
          document.body.classList.add("loading");
        }.on('willTransition')
      });

      router.reopen({
        removeLoadingCSSClassFromBody: function() {
          document.body.classList.remove("loading");
        }.on('didTransition')
      });
    });
  },
};
1 Mi Piace
11

Il codice che condivido non proviene da un widget, ma da un componente che abbiamo rilasciato per il download qui su meta.

In esso utilizziamo il router, insieme a @discourseComputed, per verificare se la route è cambiata e renderizzare di conseguenza.

Puoi esaminare più a fondo il codice se sei interessato a capire come funziona.

4 Mi Piace