Comment changer l'animation de démarrage de Discourse ?

Soutien
1

I want to replace the Discourse splash animation with the Pulse animation. (please check the animation in codepen)

How should I do it?

2

I don’t know but I would like to raise another point: if an user sees splash animation there is some bigger issues than how it looks. And when the googlebot sees it and gives a little bit better scores, it doesn’t care how it looks :wink:

My point is

  • how to change animation is not important
  • fix all issues why Discourse is answering so slowly is something that should fix (mostly on server level) and solution on that axel could need some support

I haven’t seen any splashes after… last two updates/upgrades. That means Disourse is now faster than earlier.

1 « J'aime »
3

The actual problem is not the server issue or else. I am from Sri Lanka. These days we are in a massive economic crisis. Due to the economic crisis, authorities are commencing powercuts because they cannot manage fuel powerplants. Due to these power cuts, telecommunication companies have degraded the speed of their internet services to save their battery power consumption. Therefore our Internet speed is too low these days.

5 « J'aime »
4

This is the internet speed right now :smiling_face_with_tear:

Screenshot 2022-07-28 at 3.53.30 PM
Screenshot 2022-07-28 at 3.53.30 PM1920×1200 84.9 KB

1 « J'aime »
5

Well, the situation in Sri Lanka is bad indeed, Your case is an exception, if/when your main audience is from Sri Lanka too.

Hopefully someone can guide you to right direction. But AFAIK it can’t be changed easily, though.

4 « J'aime »
6

Thanks mate. Let’s see how to do it.

1 « J'aime »
7

I don’t think it’s possible to edit from a theme, because it would involve editing an erb file; this one specifically: discourse/app/views/common/_discourse_splash.html.erb at main · discourse/discourse · GitHub

Since the splash screen loads before much of the Discourse app, I suspect it would be pretty complicated to make this customizable? @Johani is that accurate?

5 « J'aime »
8

That’s correct :+1:

The splash loads before any core JS/CSS. The current implementation doesn’t focus on customization, but v2 will. The plan is to serve the splash image from localStorage for slightly increased performance and since it allows admins to set something custom via an inline <script> tag in the theme head_tag field.

There’s currently no ETA for this work, and it needs a bit of testing, but it’s planned.

4 « J'aime »
9

You can’t directly edit the ERB splash template from a theme, and since the splash loads before core CSS/JS, customization is tricky.

The CSS you write in the theme’s normal CSS/SCSS tabs is compiled and loaded only after the splash loader shows. So even if your CSS works there, the original dots appear briefly on load.

That said, you can override the splash animation by injecting inline CSS inside the theme’s head_tag. This ensures your styles apply immediately, avoiding the default dots flicker.

Here’s an example that replaces the default dots animation with a Pulser effect similar to the one in your Codepen:

<style>
  :root {
    --pulser-color-1: #ffcc00;
    --pulser-color-2: #ff6347;
  }
  #d-splash .dots {
    all: unset;
    position: absolute;
    width: 1.6em;
    height: 1.6em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #d-splash .dots[style*="--n:-2"] { transform: translate(-300%, -50%); }
  #d-splash .dots[style*="--n:-1"] { transform: translate(-150%, -50%); }
  #d-splash .dots[style*="--n:0"]  { transform: translate(0%, -50%); }
  #d-splash .dots[style*="--n:1"]  { transform: translate(150%, -50%); }
  #d-splash .dots[style*="--n:2"]  { transform: translate(300%, -50%); }
  #d-splash .dots::before,
  #d-splash .dots::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--pulser-color-1);
    top: 0;
    left: 0;
    opacity: 0;
    animation: pulse 1s ease-out infinite;
  }
  #d-splash .dots::before {
    border-color: var(--pulser-color-2);
    animation-delay: 0.3s;
  }
  @keyframes pulse {
    0% {
      transform: scale(0.5);
      opacity: 0.6;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.8);
      opacity: 0;
    }
  }
</style>

Note: the browser cannot parse SCSS inside a <style> tag. So you cannot simply put SCSS inline. You must use CSS instead of SCSS.

The result:

pulsereffect

You need to create a new theme component, click on Edit Code, enter the Head tag and paste the above block.

Save and refresh your site with a hard reload to see the updated pulse animation immediately on splash.

This is a neat workaround until Discourse implements more customizable splash screens in the planned v2 update.

5 « J'aime »