Create a loading indicator component

[brauliodiez]

Let's create a loading indicator mock shape

It should fall under the Rich Components category

Rich Components >> Loading Indicator

Here some rough code (IMPORTANT use the Standard fonts and spacing, check the input component, and ask @deletidev about it).

SVG code (rough) THIS IS NOT VALID AS IS, IS JUST AN IDEA

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
    <!-- Círculos -->
    <circle cx="40" cy="40" r="15" fill="#666" stroke="#000" stroke-width="2"/>
    <circle cx="80" cy="40" r="15" fill="#888" stroke="#000" stroke-width="2"/>
    <circle cx="120" cy="40" r="15" fill="#aaa" stroke="#000" stroke-width="2"/>
    <circle cx="160" cy="40" r="15" fill="#ccc" stroke="#000" stroke-width="2"/>
    
    <!-- Texto -->
    <text x="100" y="85" font-family="Arial, sans-serif" font-size="14" fill="#000" text-anchor="middle">Loading...</text>
</svg>

React Konva (rough)

import React from "react";
import { Stage, Layer, Circle, Text } from "react-konva";

const LoadIndicator: React.FC = () => {
  // Tonos de gris de oscuro a claro
  const colors = ["#666", "#888", "#aaa", "#ccc"];
  
  return (
    <Stage width={200} height={100}>
      <Layer>
        {/* Círculos */}
        {colors.map((color, index) => (
          <Circle
            key={index}
            x={40 + index * 40} // Espaciado horizontal
            y={40} // Altura fija
            radius={15}
            fill={color}
            stroke="#000"
            strokeWidth={2}
          />
        ))}

        {/* Texto "Loading..." */}
        <Text
          x={0}
          y={75}
          width={200}
          text="Loading..."
          fontSize={14}
          fontFamily="Arial"
          fill="#000"
          align="center"
        />
      </Layer>
    </Stage>
  );
};

export default LoadIndicator;