Wazuh dashboard should use a GIF file as loading screen logo

[rauldpm]

Description

• Currently, the Wazuh dashboard loading screen logo is static and hardcoded in the template.js file.
  https://github.com/wazuh/wazuh-packages/blob/4.4/stack/dashboard/base/files/etc/template.js#L60-L75

  const openSearchLogo = /*#__PURE__*/_react.default.createElement("svg", {
    width: "64",
    height: "64",
    viewBox: "0 0 64 64",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/_react.default.createElement("path", {
    d: "M61.7374 23.5C60.4878 23.5 59.4748 24.513 59.4748 25.7626C59.4748 44.3813 44.3813 59.4748 25.7626 59.4748C24.513 59.4748 23.5 60.4878 23.5 61.7374C23.5 62.987 24.513 64 25.7626 64C46.8805 64 64 46.8805 64 25.7626C64 24.513 62.987 23.5 61.7374 23.5Z",
    fill: "#005EB8"
  }), /*#__PURE__*/_react.default.createElement("path", {
    d: "M48.0814 38C50.2572 34.4505 52.3615 29.7178 51.9475 23.0921C51.0899 9.36725 38.6589 -1.04463 26.9206 0.0837327C22.3253 0.525465 17.6068 4.2712 18.026 10.9805C18.2082 13.8961 19.6352 15.6169 21.9544 16.9399C24.1618 18.1992 26.9978 18.9969 30.2128 19.9011C34.0962 20.9934 38.6009 22.2203 42.063 24.7717C46.2125 27.8295 49.0491 31.3743 48.0814 38Z",
    fill: "#003B5C"
  }), /*#__PURE__*/_react.default.createElement("path", {
    d: "M3.91861 14C1.74276 17.5495 -0.361506 22.2822 0.0524931 28.9079C0.910072 42.6327 13.3411 53.0446 25.0794 51.9163C29.6747 51.4745 34.3932 47.7288 33.974 41.0195C33.7918 38.1039 32.3647 36.3831 30.0456 35.0601C27.8382 33.8008 25.0022 33.0031 21.7872 32.0989C17.9038 31.0066 13.3991 29.7797 9.93694 27.2283C5.78746 24.1704 2.95092 20.6257 3.91861 14Z",
    fill: "#005EB8"
  }));

• It is necessary to modify it so that said image is not hardcoded in the file itself but is obtained from an external file, in this way it is possible to modify the logo in an easier way from the construction of the package.
• Also, this new image must not be static, but must be replaced by a dynamic image in which the blue dot is jumping, like the one shown here:

Tasks

• Modify the template.js file to use an external SVG image.
• Make the necessary changes to use a GIF file and not an SVG file.
  • Use the GIF file shown in this issue, if not, ask @wazuh/marketing team.
• Adjust the logo of the loading screen to a smaller size in reference to the title Loading Wazuh.
  • This must be validated by the team.
• Validate changes.

Validation

• The template.js file accepts a GIF file external to it.
• The loading screen shows a moving logo.
• The size of the logo is adequate with respect to the lower title.
• The logo is displayed smoothly in both light mode and dark mode.
• The light mode of the Wazuh dashboard uses a logo on the loading screen with dark letters.
• If issue Wazuh dashboard should use a light logo on the dark mode loading screen wazuh-packages#1924 has been completed:
  • The dark mode of the Wazuh dashboard uses a logo on the loading screen with light letters.

[FelipeKnudsen]

Hey guys, i've made a few motion changes for this loading logo. Also, answering to your request, I've exported a white version for the dark mode.

You would see that two variations have a halo around the logo, it is to make the borders smoother than the other two that doesn't have. Please, make some tests and let me know if there's something else I can help with.

[alberpilot]

Taking this out of 4.4.0 triage due to doubts about the behavior in quick loads of environments, where the animation is seen too quick and weird looks of the ball.

[FelipeKnudsen]

Hey Alberto, thanks for your feedback. Here I attach the previous loading logo; the animation a little slower and the ball is not distorted as the last sketch. I kept the variations with halo to test if its seen smoother than the one who doesn't have it. Let me know what do you think.

[vikman90]

@wazuh/frontend Let me assign this task to you guys.

Currently, this task has these properties:
Objective: Installation assistant development.
Priority: High.

Best!

[AlexRuiz7]

@vikman90 can you transfer the issue to the wazuh-dashboard repo, please?

[Tostti]

PR was merged