История одного модального окна или переходим с UIKit на SwiftUI. Часть 3. ProgressView vs SkeletonView

Продолжаю эпопею с модальными экранами на SwiftUI. В первой части в комментариях уже раскрыли главную интригу, но ничего, сегодня будет больше кода. Была задача, сделать ProgressView и SkeletonView. Вдруг кому-то пригодится, показываю.

ProgressView по дизайну должен был быть с градиентной полоской загрузки, по дефолту так нельзя сделать, поэтому я решила заменить полосочку - имитацией полоски загрузки. То есть у нас есть нормальный ProgressView, у него делаем невидимой полоску загрузки, а сверху имитация полоски загрузки - градиентная View.

Хотя, сказать по правде, я даже и нормальный ProgressView в итоге удалила, т к фейковый полностью дублирует его. В общем, меньше слов, больше кода!

struct GenerateReportView: View {
  
    @Environment(\.presentationMode) var presentationMode
    
    @State private var progress: Float = 0.0
    @State private var progressIncrement: Float = 0.05
    @State private var displayLink: Timer? = nil
    @State private var text = "Получаем данные с сервера..."
    
    var body: some View {
        VStack {
            Spacer()
            VStack {
                Image("reviewIcon")
                    
                ZStack(alignment: .leading) {
                    // Фейковый фон ProgressView
                    RoundedRectangle(cornerRadius: 16)
                    
                    // Фейковая полоска загрузки для ProgressView с градиентом
                    RoundedRectangle(cornerRadius: 16)
                        .fill(LinearGradient(gradient:
                              Gradient(colors: [Color(UIColor(hex: "#5C4EF2")),
                                                Color(UIColor(hex: "#1A96FF"))]),
                              startPoint: .leading,
                              endPoint: .trailing))
                }
                
                Text(text)
                    ...
            }
        }
    }
}

Что здесь происходит: создаём два RoundedRectangle() высотой 8 и накладываем их друг на друга в ZStack. Далее прописываем второму LinearGradient и в общем-то всё. Сделала для демонстрации фейковый таймер прогресса, по желанию можно заменить на данные прогресса из API. По мере загрузки данных меняется надпись под прогрессом загрузки.

// Function to start fake progress
    private func startFakeProgress() {
        displayLink = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
            if self.progress < 0.99 {
                self.progress = min(self.progress + self.progressIncrement, 0.99)
                self.updateText()
                self.adjustProgressIncrement()
            } else {
                self.completeProgress()
            }
        }
    }
    
    // Function to update text based on progress
    private func updateText() {
        switch progress {
        case 0.0...0.19:
            text = "Получаем данные с сервера..."
        case 0.2...0.498:
            text = "Обновляем данные с сервера..."
        case 0.5...0.598:
            text = "Нужно ещё немного времени..."
        case 0.599...0.698:
            text = "Скоро загрузится..."
        case 0.699...0.89:
            text = "Ещё чуть-чуть..."
        case 0.899...0.999:
            text = "Уже почти..."
        default:
            text = "Получаем данные с сервера..."
        }
    }
    
    // Function to adjust progress increment as it gets closer to completion
    private func adjustProgressIncrement() {
        switch progress {
        case 0.0...0.19:
            progressIncrement /= 1.0
        case 0.2...0.89:
            progressIncrement /= 1.1
        case 0.9...0.99:
            progressIncrement /= 1.12
        default:
            break
        }
    }
    
    // Function to complete progress quickly once the server responds
    private func completeProgress() {
        displayLink?.invalidate()
        displayLink = nil
        
        // Complete the progress in 1 second
        withAnimation(.linear(duration: 1.0)) {
            progress = 1.0
        }
        
        // Call the delegate function if needed
        // delegate?.progressDone()
    }
    
    // Call this function when you receive the server response
    func serverResponseReceived() {
        completeProgress()
    }

Теперь перейдём к SkeletonView.

Его делать гораздо геморройнее. Для начала я создала общую структуру SkeletonLoadingView, которая может на входе принимать любую форму, размер и цвет. После этого в любом месте кода можем просто добавить необходимое количество этих View.

struct SkeletonLoadingView<ShapeType: Shape>: View {
    
    @State private var animationPosition: CGFloat = -1
    var width: CGFloat = 100
    var height: CGFloat = 10
    
    let shape: ShapeType
    let animation: Animation
    let gradient: Gradient
    
    var body: some View {
        shape
            .fill(self.gradientFill())
            .frame(width: width, height: height)
            .onAppear {
                withAnimation(animation) {
                    animationPosition = 2
                }
            }
    }
    
    private func gradientFill() -> LinearGradient {
        return LinearGradient(gradient: gradient,
                              startPoint: .init(x: animationPosition - 1, y: animationPosition - 1),
                              endPoint: .init(x: animationPosition + 1, y: animationPosition + 1))
    }
}

Ну и чтобы добавить 4 полоски на мой экран, я сделала вот так:

VStack(alignment: .leading, spacing: 8) {
                    SkeletonLoadingView(width: 350,
                                        shape: RoundedRectangle(cornerRadius: 8),
                                        animation: .easeIn(duration: 1).repeatForever(autoreverses: true),
                                        gradient: Gradient(colors: [Color.blue, Color.white]))
                    SkeletonLoadingView(width: 380,
                                        shape: RoundedRectangle(cornerRadius: 8),
                                        animation: .easeIn(duration: 1).repeatForever(autoreverses: true),
                                        gradient: Gradient(colors: [Color.blue, Color.white]))
                    SkeletonLoadingView(width: 350,
                                        shape: RoundedRectangle(cornerRadius: 8),
                                        animation: .easeIn(duration: 1).repeatForever(autoreverses: true),
                                        gradient: Gradient(colors: [Color.blue, Color.white]))
                    SkeletonLoadingView(width: 180,
                                        shape: RoundedRectangle(cornerRadius: 8),
                                        animation: .easeIn(duration: 1).repeatForever(autoreverses: true),
                                        gradient: Gradient(colors: [Color.blue, Color.white]))
}

Естественно, этот код тоже лучше вынести в отдельный модуль реализации. Но вот на этом этапе я уже начала соединять View и логику и тут-то у меня закрались некоторые подозрения... Вот мы и подошли к главной интриге - а, собственно, зачем нам SkeletonView, если я уже сделала ProgressView?

Получается, что на этапе показа экрана с описаниями - они уже все у нас подгружены и Skeleton точно не вызовется. На этапе генерации описания - показываем ProgressView. То есть SkeletonView оказался не нужен. Ну, бывает...

Полный код, как обычно, на моём GitHub.

В качестве бонуса добавила там ещё один вариант реализации Skeleton - BreathingSkeletonText. Там используется уже по дефолту RoundedRectangle (или можно изменить на свой), добавлены цвета и остальные параметры. Подойдёт, если вы уже заранее точно знаете какие фигуры и цвета будете использовать для Skeleton.

Напишите пожалуйста в комментариях, какие вам ещё темы интересны? У меня есть всякие мини видео по 10 секунд где я делаю какие-нибудь забавные мелкие штуки на SwiftUI чисто для тренировки. Могу так же дублировать сюда описание и код.

Например вот пост в ТГ где я делаю снежинки или вот создаю простую игру "кошки-мышки".