title: How to create an indefinite gradient loading like animated view?
body: <p>I would like to create a view with a gradient and an infinite loading like animation (the darkest part of the gradient would start from the left of the view, then take 2 seconds to animate to the right, and as it &quot;exits&quot; the view on the right, it would appear again on its left).</p>
  <p>A visual example (not animated, sorry) :</p>
  <p><a href="https://i.stack.imgur.com/PjAob.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PjAob.png" alt="enter image description here" /></a></p>
  <p>Here is what I started writing but it doesn't work as I want.</p>
  <pre><code>struct TestGradientView: View {
      @State private var animateGradient = false
      
      var body: some View {
          LinearGradient(
              colors: [
                  .gray.opacity(0.25),
                  .gray.opacity(0.5)
              ],
              startPoint: animateGradient ? .leading : .trailing,
              endPoint: !animateGradient ? .leading : .trailing
          )
          .onAppear {
              withAnimation(
                  .linear(duration: 2.0)
                  .repeatForever(autoreverses: true)
              ) {
                  animateGradient.toggle()
              }
          }
      }
  }
  </code></pre>
  <p>Use:</p>
  <pre><code>VStack {
      Spacer()
      TestGradientView()
          .cornerRadius(4.0)
          .padding(.horizontal, 16)
          .frame(height: 8)
      Spacer()
  }
  </code></pre>