Slider di caricamento orizzontale

Solo una nota a margine, ma recentemente ho ricordato che XenForo ha sempre avuto una barra di caricamento. Sono contento di vedere che anche Discourse ora ha qualcosa di simile. :slight_smile:

Mi chiedo quale sia più fastidioso quando la rete è scarsa.

Ottimo! :heart_eyes:

1 Mi Piace

Puoi simulare condizioni di rete scadenti utilizzando la console f12 in Chrome, se lo desideri.

4 Mi Piace

Aggiornamento su iPhone 6s:

Ora si presenta molto bene con il tema scuro e molti altri temi su mobile.

Ottimo lavoro!

Aggiornamento su Desktop:

Il cursore di caricamento è ancora appena visibile su Chromium con monitor ROG da 27" e 34".

Possiamo avere un’opzione del tema per abilitare/disabilitare in base a mobile/desktop?

1 Mi Piace

Voglio dire la stessa cosa :smiley: Un’opzione davvero buona.

1 Mi Piace

Posso riprodurre il problema se si utilizza l’accesso con Facebook. Sembra che ciò causi il parametro URL #_=_

4 Mi Piace

Ho scoperto che disabilitare il plugin discourse-topic-list-previews risolve tutti i problemi relativi allo Loading slider; non appena lo riabilito, il problema si ripresenta.

Non stiamo utilizzando alcun login di terze parti, quindi sembra che si tratti di un bug separato (o forse in qualche modo collegato?)

Modifica: In effetti, con entrambi i plugin abilitati, la pagina rimane sfocata solo per gli argomenti in cui discourse-topic-list-previews ha trovato un’immagine da sostituire a quella predefinita… e per la pagina delle categorie.

2 Mi Piace

Facendo seguito ai test effettuati su mobile e desktop con molti temi, sembra che una soluzione del genere dia un ottimo risultato per questo fantastico slider:

  height: 4px;
  
  @media only screen and (min-width: 960px) {
        height: 7px;
  }

Aggiungere un singolo pixel (da 3px a 4px) al valore predefinito si vede benissimo su mobile; sugli schermi desktop più grandi, sopra i 5px, l’effetto è gradevole, ma per ora mi sono fermato a 7px :slight_smile:

Ci lavorerò ancora un po’ quando avrò tempo, testando con vari temi su desktop “grandi” e sui miei iPhone.

1 Mi Piace

Posso tornare alla prima parte di questo, per favore? Avendolo provato su desktop, la dissolvenza in uscita è più fastidiosa dello slider. Penso sia perché quando faccio clic su un link per la pagina B, mi aspetto che la pagina A scompaia immediatamente (come faceva Discourse in passato) o rimanga lì finché non appare B (come avviene con le pagine web).

3 Mi Piace

Ciao, puoi usare questo per disabilitare l’opacità. Crea un nuovo componente nell’amministratore e aggiungilo alla sezione comune. :slight_smile:

body.loading #main-outlet {
  opacity: 1 !important;
}
5 Mi Piace

Ma in quel caso, qual è il valore aggiunto rispetto allo spinner? Solo per vedere una barra di caricamento?

2 Mi Piace

Questo disabilita semplicemente l’effetto dissolvenza. Era la prima versione. Solo lo slider superiore senza effetto dissolvenza.

2 Mi Piace

In un certo senso…

La prima iterazione non aveva alcun effetto, quindi non ricevevi alcun feedback visivo dopo aver fatto clic su un link diverso dallo slider; questo non era ideale.

Sono un po’ indeciso tra avere una pagina opaca o una pagina vuota al clic. Concordo sul fatto che possa essere un po’ distraente, forse dissolvere a 0 al clic è meglio… non sono sicuro.

6 Mi Piace

Sì, penso di sì, forse… È davvero difficile… Forse effetti modificabili sarebbero utili per tutti. :slightly_smiling_face:

Personalmente mi piace molto anche con questo effetto di dissolvenza. :slight_smile:

L’unico problema con l’opacità a 0 è che, al momento, questo influisce solo su main-outlet. L’header e la sezione below-site-header rimangono visibili.

1 Mi Piace

Immagino di dover esprimere il mio disagio personale riguardo allo sfumato (almeno su desktop) @awesomerobot / @david

Trovo davvero molto difficile leggere il testo sfumato, quindi ora ad ogni transizione il mio cervello è costretto a leggere per un istante testo sfumato e risulta un po’ stancante.

Forse se sfumasse fino a scomparire sarebbe meglio, non lo so. Una parte del problema è anche che sono a 250 ms di distanza, quindi almeno dovrò aspettare circa 300 ms, il che garantisce che passerò del tempo a guardare lettere sfumate.

12 Mi Piace

A titolo informativo,

Ho commentato la transizione del corpo (il testo che si dissolve) e penso che sembri accettabile (e forse sembri anche più veloce) quando non c’è la transizione del corpo. Una cosa vale l’altra…

// body #main-outlet {
//   transition: opacity 0.2s ease;
// }

// body.loading #main-outlet {
//   opacity: 0.2;
//   transition: opacity var(--loading-duration) ease;
// }
2 Mi Piace

Grazie, Don, va benissimo :grin:

2 Mi Piace

Sì, su mobile pensavo che lo sfumato migliorasse la barra, ma non avevo dato un’occhiata approfondita su desktop prima dell’introduzione dello sfumato. (Su desktop ho trovato lo sfumato fastidioso.)

Forse abilitare lo sfocato solo sui dispositivi mobili? La barra di caricamento mi ricorda molto Safari. :slight_smile:

1 Mi Piace