navsing

struct TextShimmer : View {
  @State var show = false
  var body : some View{
      ZStack{
        Text("Shimmer").fontWeight(.heavy).font(.largeTitle).foregroundColor(Color(UIColor.systemOrange)).redacted(reason: .placeholder)
        Text("Shimmer").fontWeight(.heavy).font(.largeTitle).foregroundColor(.white)
              .mask(
                  Capsule()
                  .fill(LinearGradient(gradient: .init(colors: [.clear,.white,.clear]), startPoint: .top, endPoint: .bottom))
                  .rotationEffect(.init(degrees: 60)) //just to tilt the shimmer a little to prettify it

navsing

struct CardShimmer : View {
  @State var show = false
  var center = (UIScreen.main.bounds.width / 2) + 110 //removing padding with this hack
  var body : some View{
      ZStack{
          Color.black.opacity(0.08)
          .frame(height: 250)
          .cornerRadius(20)
          Color.white
          .frame(height: 250)

navsing

import SwiftUI

struct Shimmer: View {
    @State var loading = true
    var body: some View {
        Group {
        if self.loading {
         ScrollView(.vertical, showsIndicators: false) {
             VStack{
                HStack {

navsing

import Foundation
import Apollo

class Network {
    static let shared = Network()
    let apollo: ApolloClient = {
        let configuration = URLSessionConfiguration.default
        configuration.httpAdditionalHeaders = [
            "x-api-key": "<YOUR-API-KEY>"
        ]

navsing

Network.shared.apollo.fetch(query: ListPersonQuery) { result in
    switch result {
        case .success(let graphQLResult):
            if let items = graphQLResult.data?.listPerson?.items {
                for conf in items {
                    if let curPerson = conf {
                    //Do whatever here with your Graphql Result
                        print(curPerson)
                    }
                }

navsing

Network.shared.apollo.perform(mutation: CreatePersonMutation(input: personInput)) { result in
  switch result {
    case .success(let graphQLResult):
      print(graphQLResult)
    case .failure(let error):
      print("Failure! Error: \(error)")
    }
}

navsing

ZStack {
    Color("bg").edgesIgnoringSafeArea(.all) //give the entire app the same background as the component's background
    RoundedRectangle(cornerRadius: 20)
        .fill(Color("bg")) //same background as the app
        .frame(width: 280, height: 280)
        .shadow(color: Color("dark"), radius: 5, x: -10, y: -10) //shadow left and top
        .shadow(color: Color("light"), radius: 5, x: 10, y: 10).padding(.top, 32) //shadow right and bottom
        .blur(radius: 5) //to show smooth transition
}

navsing

Button(action: {}) {
Circle()
        .fill(Color("bg"))
        .frame(width: 96, height: 96)
        .shadow(color: Color("dark"), radius: 5, x: -10, y: -10)
        .shadow(color: Color("light"), radius: 5, x: 10, y: 10)
        .blur(radius: 5)
        .overlay(
Image(systemName: "play.fill")
                .resizable()

navsing

ZStack(alignment: Alignment(horizontal: .leading, vertical: .center), content: {
    Capsule()
      .fill(Color.gray.opacity(0.2))
      .frame(height: 6)
    ZStack(alignment: Alignment(horizontal: .trailing, vertical: .center)) {
      Capsule()
        .fill(Color("dark").opacity(0.6))
        .frame(width: value,height: 6) //value is the current volume percentage
      Circle()
        .fill(Color("dark"))

navsing

import SwiftUI
import Lottie

struct LottieView: UIViewRepresentable {
    let animationView = AnimationView()
    var lottieFile = ""
    
    func makeUIView(context: UIViewRepresentableContext<LottieView>) -> UIView {
        let view = UIView()
        let animation = Animation.named(filename)