Fix flickering issues when resizing window (#1644)

* Fix flickering issues when resizing window, or hiding notifications on macOS

* Restore processor and add debouncing to the processor updates

* Fix indentation

* Add LazyResizableImage to the Design system module
This commit is contained in:
Hugo Saynac 2023-11-01 18:57:13 +01:00 committed by GitHub
parent b2550d28ac
commit b2933b8c75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 59 additions and 23 deletions

View File

@ -0,0 +1,42 @@
//
// LazyResizableImage.swift
//
//
// Created by Hugo Saynac on 28/10/2023.
//
import Nuke
import NukeUI
import SwiftUI
/// A LazyImage (Nuke) with a geometry reader under the hood in order to use a Resize Processor to optimize performances on lists.
/// This views also allows smooth resizing of the images by debouncing the update of the ImageProcessor.
struct LazyResizableImage<Content: View>: View {
init(url: URL?, @ViewBuilder content: @escaping (LazyImageState, GeometryProxy) -> Content) {
self.imageURL = url
self.content = content
}
let imageURL: URL?
@State private var resizeProcessor: ImageProcessors.Resize?
@State private var debouncedTask: Task<Void, Never>?
@ViewBuilder
private var content: (LazyImageState, _ proxy: GeometryProxy) -> Content
var body: some View {
GeometryReader { proxy in
LazyImage(url: imageURL) { state in
content(state, proxy)
}
.processors([resizeProcessor == nil ? .resize(size: proxy.size) : resizeProcessor!])
.onChange(of: proxy.size, initial: true) { oldValue, newValue in
debouncedTask?.cancel()
debouncedTask = Task {
do { try await Task.sleep(for: .milliseconds(200)) } catch { return }
resizeProcessor = .resize(size: newValue)
}
}
}
}
}

View File

@ -47,10 +47,8 @@ public struct StatusRowCardView: View {
if let title = card.title, let url = URL(string: card.url) {
VStack(alignment: .leading) {
if let imageURL = card.image, !isInCaptureMode {
GeometryReader { proxy in
LazyResizableImage(url: imageURL) { state, proxy in
let width = imageWidthFor(proxy: proxy)
let processors: [ImageProcessing] = [.resize(size: .init(width: width, height: imageHeight))]
LazyImage(url: imageURL) { state in
if let image = state.image {
image
.resizable()
@ -64,10 +62,8 @@ public struct StatusRowCardView: View {
.frame(height: imageHeight)
}
}
.processors(processors)
// This image is decorative
.accessibilityHidden(true)
}
.frame(height: imageHeight)
}
HStack {

View File

@ -217,10 +217,9 @@ public struct StatusRowMediaPreviewView: View {
GeometryReader { proxy in
switch type {
case .image:
let width = isCompact ? imageMaxHeight : proxy.frame(in: .local).width
let processors: [ImageProcessing] = [.resize(size: .init(width: width, height: imageMaxHeight))]
ZStack(alignment: .bottomTrailing) {
LazyImage(url: attachment.previewUrl ?? attachment.url) { state in
LazyResizableImage(url: attachment.previewUrl ?? attachment.url) { state, proxy in
let width = isCompact ? imageMaxHeight : proxy.frame(in: .local).width
if let image = state.image {
image
.resizable()
@ -240,7 +239,6 @@ public struct StatusRowMediaPreviewView: View {
.frame(maxWidth: width)
}
}
.processors(processors)
if sensitive, !isInCaptureMode {
cornerSensitiveButton
}