# Deslizador de carga horizontal

**URL:** https://meta.discourse.org/t/horizontal-loading-slider/177939
**Category:** Theme component
**Tags:** deprecated
**Created:** [1 Febrero, 2021 09:57 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939 "2021-02-01T09:57:32Z")
**Posts on this page:** 20
**Page:** 9

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [16 Febrero, 2021 19:47 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/191 "2021-02-16T19:47:01Z")

</div>

~~@david ¿quizás deshabilitamos todos los clics mientras se carga la nueva página y mostramos el contenido antiguo? Parece un caso límite, pero razonable~~

@awesomerobot ¿estás satisfecho con el grosor del control deslizante en el escritorio? En mi departamento no hay consenso, así que vamos a probarlo así durante unos días. En móvil, creo que tenemos el equilibrio adecuado.

---

<div class="post-metadata">

### Author: ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)
#### Post date: [16 Febrero, 2021 22:47 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/192 "2021-02-16T22:47:52Z")

</div>

> [@sam](#):
>
> quizás deshabilitemos todos los clics mientras se carga la nueva página y mostramos el contenido antiguo. Parece un caso límite, pero razonable.

Depende de lo que quieras lograr, creo. Si uno de tus objetivos principales es que “funcione (casi) idéntico al resto de internet”, quizás no quieras hacer esto. En sitios web “normales”, si hago clic muy rápidamente en un segundo enlace después de hacer clic en el primero, se cargará el contenido del segundo enlace.

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [16 Febrero, 2021 22:55 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/193 "2021-02-16T22:55:25Z")

</div>

Me encanta este cambio, especialmente con los ajustes posteriores… Me gusta tanto que tengo muchas ganas de que salga en una beta para obtener aún más comentarios.

¿Cuándo podemos incluir esto en el núcleo @david?

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [17 Febrero, 2021 01:42 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/194 "2021-02-17T01:42:47Z")

</div>

Sí, supongo que tienes razón… Supongo que apoyo simplemente integrarlo en el núcleo exactamente como está hoy.

Siempre podemos refinarlo a medida que avanzamos, pero lo que tenemos ahora está bastante pulido y funciona muy bien.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [17 Febrero, 2021 02:20 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/195 "2021-02-17T02:20:28Z")

</div>

A mí me parece bien con el grosor actual. Creo que si recibimos quejas de que no es lo suficientemente visible, entonces podemos aumentarlo en 1px más. ¡Estoy emocionado de verlo en el núcleo!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [17 Febrero, 2021 09:59 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/196 "2021-02-17T09:59:02Z")

</div>

¡Suena genial! Todavía hay algunos errores de renderizado que hay que solucionar (por ejemplo, [este](https://meta.discourse.org/t/navigation-toggle-persists-on-mobile-after-selection-is-tapped/179976?u=david)), pero una vez que los arregle, podríamos incorporarlo al núcleo. Aunque creo que aún preferiría probarlo un poco más en Meta. La implementación actual solo ha estado activa durante 24 horas.

Mirando algunas otras PWA populares:

| Servicio | Cambio inmediato de toda la página | Deslizador | Cargador | Marcador de posición personalizado |
| --- | --- | --- | --- | --- |
| Facebook | ✅ | | | ✅ |
| Twitter | ✅ | | ✅ | |
| LinkedIn | (en algunas páginas) | | ✅ | |
| YouTube | ❌ | ✅ | | |
| GitHub | ❌ | ✅ | | |
| :discourse: Discourse antiguo | ✅ | | ✅ | |
| :discourse: Discourse con deslizador | ❌ | ✅ | | |

Por lo tanto, este cambio nos haría más parecidos a YouTube y GitHub, los cuales, en mi opinión, se sienten más como sitios web que como aplicaciones. ¿Es esa la dirección que queremos tomar? 🤔

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [17 Febrero, 2021 10:12 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/197 "2021-02-17T10:12:05Z")

</div>

> [@david](#):
>
> ¿Es esa la dirección en la que queremos ir?

Creo que sí, encaja con una filosofía de tema predeterminado minimalista y similar a la web. Siempre podemos proporcionar un componente de tema para el spinner o un marcador de posición personalizado si sentimos que queremos experimentar.

Me gusta mucho que este cambio reduzca la cantidad de píxeles que cambian en la pantalla.

Creo que Gmail también utiliza un patrón similar (renderiza la carga en un cuadrado y luego cambia el contenido).

---

<div class="post-metadata">

### Author: ![neounix](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neounix/32/215617_2.png) [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [17 Febrero, 2021 10:53 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/198 "2021-02-17T10:53:17Z")

</div>

> [@awesomerobot](#):
>
> Pienso que si recibimos quejas de que no es lo suficientemente visible, tal vez entonces podamos aumentarlo en otro 1px.

Tenemos nuestro control deslizante configurado de la siguiente manera (a continuación). Es cuestión de gusto, pero creo que 4px en móviles es más agradable que 3px; aunque 3px está bien y, desde luego, es aceptable. Sin embargo, en pantallas grandes de escritorio, subjetivamente, se ve mejor a 6px; aunque personalmente prefiero 7px porque quiero que la gente vea el control deslizante y el progreso relativo cuando se carga la página, independientemente de los colores de fondo de cualquier tema; pero si lo reducimos a 6px en una pantalla grande de escritorio, también es muy aceptable. Menos de 6px en pantallas grandes de escritorio lo hace apenas noticeable en monitores de 27 y 34" (con algunos colores de fondo de tema); y dado que el control deslizante indica “cargando”, en mi opinión es mejor pecar por el lado de ser más visible; pero, de nuevo, es muy subjetivo, por supuesto.

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

```

---

<div class="post-metadata">

### Author: ![chrispanag](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chrispanag/32/105853_2.png) [@chrispanag](https://meta.discourse.org/u/chrispanag)
#### Post date: [17 Febrero, 2021 20:40 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/199 "2021-02-17T20:40:41Z")

</div>

Mi (tardío) feedback sobre esta función:

Antes de visitar este tema, ni siquiera noté el cambio, lo cual es… ¡genial! En mi opinión, las buenas funciones son aquellas que se integran perfectamente en la experiencia actual.

Después de prestarle atención a la función, puedo estar de acuerdo en que la menor cantidad de parpadeos en la pantalla es más agradable visualmente que el comportamiento anterior.

¡Felicidades al equipo por el cuidado diseño y la reflexión que pusieron en este cambio! 🙂

---

<div class="post-metadata">

### Author: ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [19 Febrero, 2021 12:28 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/200 "2021-02-19T12:28:33Z")

</div>

Hola,

Me encanta este componente, pero encontré un error (pensé que había un conflicto en mi tema, pero puedo verlo aquí también). Cuando hacemos clic en el elemento `.navigation-toogle`, el menú desplegable permanece abierto:

 ![Screenshot_20210219-131910_Samsung Internet](https://global.discourse-cdn.com/meta/original/3X/9/d/9d2eb79397543cb9545043a234e909c59740043a.jpeg) ![Screenshot_20210219-133126_Samsung Internet](https://global.discourse-cdn.com/meta/original/3X/5/a/5a95686c447d5a568fb915a59f247c2985995618.jpeg)

---

<div class="post-metadata">

### Author: ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)
#### Post date: [19 Febrero, 2021 13:56 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/201 "2021-02-19T13:56:24Z")

</div>

Tal vez mi informe se perdió en el caos (o quizás simplemente no han tenido tiempo de revisarlo aún).

> [@Horizontal loading slider](https://meta.discourse.org/t/experiment-on-meta-loading-slider/177939/95?u=seanblue):
>
> I think there’s a mobile bug (at least on iPhone) with this new feature. If you select “Latest” from the navigation dropdown, when the page loads the dropdown properly goes away. But if you select “New” or “Unread” (possibly others), the dropdown is still visible. It doesn’t happen 100% of the time, but often enough that it should be easily reproducible. Note that this did happen sometimes with the old version, but only with “Latest” and never with “New” or “Unread”.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [19 Febrero, 2021 17:37 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/202 "2021-02-19T17:37:44Z")

</div>

Gracias @cosdesign y @seanblue; sigue siendo una prioridad para mí solucionarlo. He creado una lista de ‘problemas conocidos’ en el mensaje original (OP) de aquí para que podamos llevar un registro de lo que queda pendiente.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [22 Febrero, 2021 14:19 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/203 "2021-02-22T14:19:58Z")

</div>

El problema del menú desplegable debería estar resuelto ahora:

> <https://github.com/discourse/discourse/commit/863c7919d7f9292bfced713d91aaa827b0c1747c>
>
> This \`if\` statement was backwards, such that it was a no-op. This hasn't
> caused… a problem because clicking an item triggers a page load, which
> destroys and recreates the component.
> 
> However, we are soon planning to remove the intermediate loading screen,
> which means the component will not be removed/recreated.
> 
> https://meta.discourse.org/t/177939/202

---

<div class="post-metadata">

### Author: ![rux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rux/32/209612_2.png) [@rux](https://meta.discourse.org/u/rux)
#### Post date: [22 Febrero, 2021 14:29 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/204 "2021-02-22T14:29:33Z")

</div>

¡Me encanta este componente! Acabo de instalarlo también en mi foro de Discourse. ¡Gracias!

Una sugerencia: ¿sería posible mostrar un esqueleto mientras la página se carga? En casos en los que la página pueda tardar un momento en cargar, esto puede ayudar a indicar que el clic se ha registrado. Es solo un pequeño detalle que he notado: a veces hago doble clic en el título de un tema porque al principio no veía la barra de carga, mientras que el spinner se mostraba de inmediato.

 ![Screenshot 2021-02-22 at 15.27.22](https://global.discourse-cdn.com/meta/original/3X/7/a/7a6c547ad612a1e89e3f07f14863dbf10d018741.jpeg)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [23 Febrero, 2021 04:56 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/205 "2021-02-23T04:56:01Z")

</div>

Es un compromiso que adoptamos aquí: optamos por no cambiar nada en la pantalla a menos que hayan pasado 2 segundos y no tengamos contenido que mostrar.

Supongo que podríamos ofrecer algún tipo de interruptor para reducir esos 2 segundos a 1, pero siento que hemos encontrado el equilibrio adecuado aquí.

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [27 Febrero, 2021 01:07 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/206 "2021-02-27T01:07:30Z")

</div>

Acabo de volver después de varios días fuera y lo primero que noté es lo lento que se siente todo ahora.

Sé que Google Groups ha introducido algo similar, pero no creo que necesitemos imitar lo que están haciendo. El spinner encajaba mucho mejor con Discourse, en mi opinión; era ágil e incluso ayudó a desmentir el mito de que las aplicaciones Ruby siempre son lentas. Me encantaba y me encantaba lo rápido que parecía Discourse. Lamentablemente, siento que este control deslizante es un gran paso atrás (disculpas a todos los que trabajaron en ello; sé que probablemente no es lo que querían oír, pero creo que todos queremos lo mejor para Discourse, así que espero que no les importe que comparta lo que siento al respecto).

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [27 Febrero, 2021 02:08 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/207 "2021-02-27T02:08:25Z")

</div>

Cuando lancemos esto en el núcleo, proporcionaremos un componente que permita el modo de transición anterior.

Hemos escuchado sus comentarios, pero ustedes representan una minoría extrema; la mayoría de los usuarios prefiere el nuevo estilo de transición. El nuevo estilo implica que cambien menos elementos en la pantalla.

Antiguo

Hacer clic → pantalla blanca → contenido

Nuevo

Hacer clic → contenido

Entiendo que a algunas personas pueda gustarles una pantalla blanca con un indicador de carga, pero esta es una opinión minoritaria.

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [27 Febrero, 2021 03:25 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/208 "2021-02-27T03:25:25Z")

</div>

No se trata de amar o no una pantalla blanca, Sam, sino de la sensación de velocidad.

De hecho, siempre he considerado que la velocidad (y la sensación) de Discourse era una de sus características más impresionantes, y sé que incluso quienes estaban bastante en contra de Ruby quedaron impresionados por lo que lograste con Discourse.

También creo que esa sensación de velocidad es más importante ahora que nunca, porque competimos constantemente con sitios gigantes como Twitter y Discord, y pienso que incluso una ligera sensación de lentitud podría tener un impacto, aunque sea subconsciente.

* * *

_Es genial que habrá un componente para el modo de transición antiguo, pero mi preocupación es que podría añadir una sobrecarga que provoque una ralentización (aunque sea pequeña), anulando así los beneficios de la forma antigua/el spinner. Si esto no va a ser así, estaré encantado con ello… pero sigo pensando que este movimiento será perjudicial para todos los demás sitios de Discourse que hay ahí fuera._

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [27 Febrero, 2021 10:51 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/209 "2021-02-27T10:51:54Z")

</div>

Estoy totalmente de acuerdo con la percepción de la velocidad.

Si el spinner permaneciera en pantalla durante demasiado tiempo, indicaría un problema (aunque el spinner no sería el problema en sí) y quizás sería menos informativo que una barra de progreso deslizante.

Las barras deslizantes indican lentitud subyacente. Me recuerdan a esas antiguas barras de progreso de Windows (tiempo estimado restante: 6 días 23 horas). Cuando las veo, pienso que debe haber un problema de velocidad y que están ahí para reducir mi impaciencia. Esta siempre parece detenerse ligeramente alrededor del 80 %, lo que me hace pensar que algo ha salido mal, cada vez.

Si el foro es rápido, la barra deslizante no es una buena idea.

---

<div class="post-metadata">

### Author: ![seanblue](https://avatars.discourse-cdn.com/v4/letter/s/dc4da7/32.png) [@seanblue](https://meta.discourse.org/u/seanblue)
#### Post date: [3 Abril, 2021 01:09 UTC](https://meta.discourse.org/t/horizontal-loading-slider/177939/218 "2021-04-03T01:09:52Z")

</div>

Cuanto más uso Meta, más creo que prefiero el antiguo spinner. El control deslizante simplemente no es lo suficientemente visible, lo que hace que el sitio web se sienta poco receptivo.

[Previous page](https://meta.discourse.org/t/horizontal-loading-slider/177939.md?page=8)

[Next page](https://meta.discourse.org/t/horizontal-loading-slider/177939.md?page=10)
