csolanam / skeletonui Goto Github PK
View Code? Open in Web Editor NEW☠️ Elegant skeleton loading animation in lightweight SwiftUI
License: MIT License
☠️ Elegant skeleton loading animation in lightweight SwiftUI
License: MIT License
Describe the bug
When trying to use SkeletonUI in a NavStack it seems to animate the view from the origin.
To Reproduce
import SwiftUI
import SkeletonUI
struct SkeletionAnimationView: View {
var body: some View {
NavigationStack {
Text("")
.skeleton(with: true)
}
}
}
#Preview {
SkeletionAnimationView()
}
Expected behavior
Same as w/o the NavStack. It should show a fullscreen capsule with the skeleton animation.
Screenshots
https://github.com/CSolanaM/SkeletonUI/assets/18512366/8a5a8e03-eea2-4ce7-8012-79766b7ac997
Smartphone:
Additional context
Don't want to assume anything, but possibly an iOS issue:
Is your feature request related to a problem? Please describe.
macOS tests are commented because they aren't passing on the CI, its screen scale factor is 1 and should be 2 to match locally generated reference images. It will be fixed later.
Describe the solution you'd like
macOS tests should be enabled and passing CI snapshot tests.
Is your feature request related to a problem? Please describe.
It would be nice to have a transition when skeleton finishes and shows the real content.
Describe the solution you'd like
A fade-out opacity animation when the skeleton finishes loading and a fade-in opacity animation on the real content running in parallel.
Describe alternatives you've considered
Supporting other kind of transitions.
Describe the bug
Skeleton element uses full available height even in basic example. Occures on both, device and XCode preview.
Expected behavior
Skeleton uses height of one line of text
Screenshots
Uploaded in reproduction section
Desktop (please complete the following information):
Smartphone (please complete the following information):
Describe the bug
I'm using SkeletonUI in my app and in one of the views I was having a bug that apparently was related to displaying the SkeletonUI View. The problem, after hours of debugging, was apparently caused by .navigationBarHidden(true)
that was applied to a ZStack witch contained the Text View displaying the skeleton to prevent a UIHostingController from displaying the nav bar.
To Reproduce
This is the main view.
var body: some View {
ZStack(alignment: .center) {
Text("")
.skeleton(with: true)
.shape(type: .rectangle)
.multiline(lines: 2, scales: [0: 0.8, 1: 0.6], spacing: 2.0)
.appearance(type: .gradient(GradientType.linear, color: Color(UIColor(hex: 0xbdcbdb)), background: .white, radius: 0.7, angle: 0.0))
.animation(type: .linear(delay: 0.0))
.padding(.bottom, 20.0)
}
// Removing the next 2 lines will remove the bug.
.navigationBarTitle("")
.navigationBarHidden(true)
}
Note: To reproduce this code you need to put this view in a UIHostingController.
Expected behavior
A normal 2 lines gradient animation that does not move.
Screenshots
Note: Updated Video.
Screenshots
Additional context
The Swift UI view is presented in a UIHostingController.
In the AppearenceInteractor file you declare an extension to the Color type.
However this creates an error when I import this library in a file and in the same file use the stock Color.primary by Apple as there are two Color.primary and it is ambiguous.
Please rename it.
public static var primary: Color {
#if os(iOS)
return Color(.systemGray4)
#elseif os(tvOS)
return Color(.tertiaryLabel)
#elseif os(watchOS)
return Color.secondary
#elseif os(macOS)
return Color(.alternateSelectedControlColor)
#endif
}
}
Thank you for starting this project! I'm excited to check it out!
Describe the bug
While trying to do a new install of SkeletonUI, the pod install fails with the following error:
[!] Error installing SkeletonUI
[!] /usr/bin/git clone https://github.com/CSolanaM/SkeletonUI.git /var/folders/st/3lb8mpm938xfqktsrb3b62g80000gn/T/d20191029-96400-wf7mcw --template= --single-branch --depth 1 --branch 0.1.1
Cloning into '/var/folders/st/3lb8mpm938xfqktsrb3b62g80000gn/T/d20191029-96400-wf7mcw'...
warning: Could not find remote branch 0.1.1 to clone.
fatal: Remote branch 0.1.1 not found in upstream origin
To Reproduce
Steps to reproduce the behavior:
pod install
Expected behavior
SkeletonUI is installed.
Screenshots
It's just the text above.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
none
SkeletonUI is not available on iOS 15. Any updates on that?
Hey, thanks for the last fix.. <3 super cool project..!
I just noticed another bug while playing around with it hehe
Describe the bug
When navigating back to a view that has a loading state, the onAppear
function is called multiple times. This causes the (repeat-forever) animation to be 'toggled' multiple times.
To Reproduce
Steps to reproduce the behavior:
0. View with skeleton modifier inside a NavigationStack
Expected behavior
The skeleton animation should play normally.
Screenshots
Didn't find any.. can try to reproduce and add one if needed..?
Additional context
The problem is the .toggle()
which is called at onAppear
. I found one solution is to check animate == false
or instead of toggling just setting the value to true
.
For reference, my solution: 64f6246
Describe the bug
bug when use scrollview with skeletonForeach.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
working as skeletonList
Describe the bug
Hi @CSolanaM .
First of all, I would like to say thanks for your framework but, unfortunately, I've found one issue that blocks me from submitting my app to App Store. I would like to describe it.
I have a screen with two main elements: some card that may be flipped by the user and a list of data for which I use SkeletonList. Both views inside the body of ContentView. Not more. SkeletonList is animated when the screen is appeared to start loading content, but when the user flipped a card SkeletonList stops its animation. The same issue for SkeletonForEach.
To Reproduce
I put here the small piece of code that simulates my screen:
import SwiftUI
import SkeletonUI
struct CardContentView<Content>: View where Content: View {
var content: () -> Content
var body: some View {
content()
}
}
struct TopCardFronView: View {
@Binding var anotherLoading: Bool
var body: some View {
VStack {
Text("Tap me")
.foregroundColor(.white)
.font(.largeTitle)
.onTapGesture {
anotherLoading.toggle()
}
}
.frame(width: 150, height: 150)
.background(Color.black)
}
}
struct TopCardBackView: View {
var body: some View {
VStack {
Text("Another text")
.foregroundColor(.white)
.font(.largeTitle)
}
.frame(width: 150, height: 150)
.background(Color.black)
}
}
struct User: Identifiable {
let id = UUID()
let name: String
}
struct ContentView: View {
@State private var rotationAngle: Double = 0
@State private var flipped = false
@State private var anotherLoading = false
@State var users = [User]()
var body: some View {
VStack {
CardContentView {
VStack {
Group {
if flipped {
TopCardBackView()
.rotation3DEffect(.degrees(rotationAngle),
axis: (x: 0.0, y: 1.0, z: 0.0))
} else {
TopCardFronView(anotherLoading: $anotherLoading)
}
}
}
}
.rotation3DEffect(.degrees(rotationAngle),
axis: (x: 0.0, y: 1.0, z: 0.0))
.onChange(of: anotherLoading, perform: { value in
withAnimation {
flipped.toggle()
rotationAngle += 180
}
})
SkeletonList(with: users, quantity: 6) { loading, user in
Text(user?.name)
.skeleton(with: loading)
.shape(type: .rectangle)
.appearance(type: .solid(color: .red, background: .blue))
.multiline(lines: 3, scales: [1: 0.5])
.animation(type: .pulse())
}
.onAppear {
DispatchQueue.main.asyncAfter(deadline: .now() + 20) {
self.users = [User(name: "John Doe"),
User(name: "Jane Doe"),
User(name: "James Doe"),
User(name: "Judy Doe")]
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Expected behavior
SkeletonList should continue to animate.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
Using SkeletonForEach
twice in a LazyVGrid causes the IDs to be duplicated which leads to several bugs.
To Reproduce
LazyVGrid(columns: gridLayout, spacing: 20) {
SkeletonForEach(with: ..., quantity: 2) { (loading, item) in
Text(item).skeleton(with: loading)
}
SkeletonForEach(with: ..., quantity: 2) { (loading, item) in
Text(item).skeleton(with: loading)
}
}
Expected behavior
To be able to use two SkeletonForEach
's.
Additional context
develop
This only happens when previewing, and not when running the actual app. Unfortunately, I can't preview anywhere in the app now. iOS, SwiftUI
Is your feature request related to a problem? Please describe.
Linear gradient could be created with an angle representing inclination from horizontal axis.
Describe the solution you'd like
On SkeletonShape
, where the linear gradient is created it could have an additional angle parameter in the appearance type case, so it should be able to calculate the starting and end position taking into account some elevation on the Y-axis.
I got this error when running your example
SkeletonUI-macOS-iOS[1728:47422] Task <5ED5FF93-B549-451D-88B1-A54648BCBDA0>.<1> finished with error [-999] Error Domain=NSURLErrorDomain Code=-999 "cancelled" UserInfo={NSErrorFailingURLStringKey=https://rickandmortyapi.com/api/character/, NSLocalizedDescription=cancelled, NSErrorFailingURLKey=https://rickandmortyapi.com/api/character/}
Can you give it a look?
Thanks
Hi There,
I'm trying to use the example to animate my skeleton. However, it's not getting animated.
To Reproduce
Steps to reproduce the behavior:
Text("Finished requesting users!")
.skeleton(with: true)
.appearance(type: .solid(color: .red, background: .blue))
.animation(type: .pulse())
.background(Color.black)
Expected behavior
It should be animated
What could be happening?
Best Regards
Subject: We need to incorporate the xcprivacy manifest into our app . Starting March 13, Apple will send notifications when uploading builds to the App Store, and this will become mandatory from May 1. All the SDKs used in our app needs to incorporate the xcprivacy manifest.
Reference: https://developer.apple.com/news/?id=3d8a9yyh
Actions needed: We need the compatible xcprivacy manifest version IOS SDK with xcprivacy manifest. We are expecting a seamless upgrade by upgrading to the latest version.
The animation does not occur with iOS 17.
There is a thread here which provides a solution.
When I put the skeleton in the view with the navigation bar, the view starts to change the frame, but when I change the transition to .scale, everything works.
struct ContentView: View {
var body: some View {
NavigationView(content: {
Text("Hello, World!")
.skeleton(with: true)
.navigationTitle("temp")
.navigationBarTitleDisplayMode(.inline)
})
}
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.