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:
parent
b2550d28ac
commit
b2933b8c75
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue