My preview isn't working, what should I do to fix it?

Hey y’all. I am getting an error that says:

PreviewUpdateTimedOutError: Updating took more than 5 seconds

Updating a preview from LoginView_Previews in SMK.app (10151) took more than 5 seconds.

My file:

import SwiftUI

struct LoginView: View {
   var body: some View {

        LogView()

    }
}

struct LoginView_Previews: PreviewProvider {
    static var previews: some View {
        LoginView()

    }
}

struct LogView: View {

    @StateObject var model = ModelData()

    var body: some View {

        VStack {

            Spacer(minLength: 0)

            SignInImage()
                .padding(.horizontal)
                .padding(.vertical, 20)
                .background(Color.white.opacity(0.2))
                .cornerRadius(30)

            VStack(spacing: 4) {
                HStack(spacing: 0){
                    Text("Food = ")
                        .font(.system(size: 35))
                        .foregroundColor(Color.white)
                        .fontWeight(.semibold)

                    Text("Life.")
                        .font(.system(size: 35))
                        .foregroundColor(Color.white)
                        .fontWeight(.bold)
                }

                Text("Let order some deliciousness!")

            }
            .padding(.top)

            VStack(spacing: 20){

                CustomTextField(image: "envelope", placeHolder: "Email", txt: $model.email)

                CustomTextField(image: "lock", placeHolder: "Password", txt: $model.password)

            }
            .padding(.top)

            Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/, label: {

                Text("Login")
                    .fontWeight(.bold).foregroundColor(Color("Blue")) .padding(.vertical) .frame(width: UIScreen.main.bounds.width - 30)
                    .background(Color.white) .clipShape(Capsule())

            })

            HStack(spacing: 12){
                Text("Don't have an account?") .foregroundColor(Color.white.opacity(0.7))

                Button(action: {model.isSignUp.toggle()}) {

                    Text("Sign Up Now") .fontWeight(.bold) .foregroundColor(.white) } } .padding(.top,25)

                .padding(.bottom, 1)

            Button(action: {
                model.resetPassword()
            }) {
                Text("Forget Password?") .fontWeight(.bold) .foregroundColor(.white)

            }
            .padding(.top, 20)

            Divider()

        Spacer(minLength: 0)
        }
        .background(LinearGradient(gradient: Gradient(colors: [Color("Blue"), Color("Purple")]), startPoint: .top, endPoint: .bottom))
        .ignoresSafeArea(.all, edges: .all)
        .fullScreenCover(isPresented: $model.isSignUp){
            SignUpView(model: model)
        }
        alert(isPresented: $model.isLinkSend, content: {
            Alert(title: Text("Message"), message: Text("Password reset link has been sent."), dismissButton: .destructive(Text("Ok")))
        })
    }
}

struct SignUpView: View {

    @ObservedObject var model: ModelData

    var body: some View {

        ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)) {
            VStack {
                Spacer(minLength: 0)

                SignInImage()
                    .padding(.horizontal)
                    .padding(.vertical, 20)
                    .background(Color.white.opacity(0.2))
                    .cornerRadius(30)

                VStack(spacing: 4) {
                    HStack(spacing: 0){
                        Text("New ")
                            .font(.system(size: 35))
                            .foregroundColor(Color.white)
                            .fontWeight(.semibold)

                        Text("Account")
                            .font(.system(size: 35))
                            .foregroundColor(Color.white)
                            .fontWeight(.bold)
                    }

                    Text("Create An Account!")

                }
                .padding(.top)

                VStack(spacing: 20){

                    CustomTextField(image: "envelope", placeHolder: "Email", txt: $model.email_SignUp)

                    CustomTextField(image: "lock", placeHolder: "Password", txt: $model.password_SignUp)

                    CustomTextField(image: "lock", placeHolder: "Re - Enter Password", txt: $model.reEnterPassword)

                }
                .padding(.top)

                Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/, label: {

                    Text("Sign Up")
                        .fontWeight(.bold).foregroundColor(Color("Blue")) .padding(.vertical) .frame(width: UIScreen.main.bounds.width - 30)
                        .background(Color.white) .clipShape(Capsule())

                })

                Spacer(minLength: 0)
            }

            Button(action: {
                model.isSignUp.toggle()
            }, label: {
                Image(systemName: "xmark")
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.black.opacity(0.6)).clipShape(Circle())
            })
            .padding(.trailing)
            .padding(.top, 10)

        }
        .background(LinearGradient(gradient: Gradient(colors: [Color("Blue"), Color("Purple")]), startPoint: .top, endPoint: .bottom))
        .ignoresSafeArea(.all, edges: .all)
        }
    }

struct CustomTextField : View {
    var image : String
    var placeHolder : String
    @Binding var txt : String
    var body: some View{
        ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {

            Image(systemName: image) .font(.system(size: 24)) .foregroundColor(Color("Purple")) .frame(width: 60, height: 60) .background(Color.white) .clipShape(Circle())

            ZStack{
                if placeHolder == "Password" || placeHolder == "Re-Enter"{ SecureField(placeHolder, text: $txt) } else{

                    TextField(placeHolder, text: $txt) } } .padding(.horizontal) .padding(.leading,65) .frame(height: 60) .background(Color.white.opacity(0.2)) .clipShape(Capsule()) } .padding(.horizontal) } }
class ModelData: ObservableObject {

    @Published var email = ""
    @Published var password = ""
    @Published var isSignUp = false
    @Published var email_SignUp = ""
    @Published var password_SignUp = ""
    @Published var reEnterPassword = ""
    @Published var resetEmail = ""
    @Published var isLinkSend = false

    func resetPassword() {

        let alert = UIAlertController(title: "Reset You Password", message: "Enter your email to reset your password.", preferredStyle: .alert)

        alert.addTextField { (password) in

            password.placeholder = "Email"

        }
        let proceed = UIAlertAction(title: "Reset", style: .default)

        self.resetEmail = alert.textFields![0].text!

        self.isLinkSend.toggle()

        let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: nil)

        alert.addAction(proceed)
        alert.addAction(cancel)

        UIApplication.shared.windows.first?.rootViewController?.present(alert, animated: true)
    }

}

its either something heavy is making your preview load slowly, or there might be something missing like what you set up here
/@START_MENU_TOKEN@/{}/@END_MENU_TOKEN@/
it is also possible that your mac is just slow either you have a basic graphics card or low of ram, just try running it in the simulator though and see if it can load it there instead

You also might want to consider separating your views into their own files rather than having all your structs and classes in the one code file. It makes your App more modular and to my way of thinking, easier to read.

I also note that you appear to have your class ModelData right in the middle of your struct CustomTextField. I’m assuming that was accidental when you pasted the code in your post.

Your Sign Up button action has placeholder code which could be affecting the preview generator. Consider adding your modifiers on a separate line to make your code more readable.

Button(action: /*@START_MENU_TOKEN@*/{}/*@END_MENU_TOKEN@*/, label: {
    Text("Sign Up")
        .fontWeight(.bold).foregroundColor(Color("Blue")) .padding(.vertical) .frame(width: UIScreen.main.bounds.width - 30)
        .background(Color.white) .clipShape(Capsule())
})

change it to:

Button(action: {
    // Your action code goes here.
}, label: {
    Text("Sign Up")
        .fontWeight(.bold)
        .foregroundColor(Color("Blue")) 
        .padding(.vertical) 
        .frame(width: UIScreen.main.bounds.width - 30)
        .background(Color.white)
        .clipShape(Capsule())
})

and give that a try.

I placed your code into a dummy project and discovered that the preview would not work because there is a modifier missing a period in front of it.

Look down towards the end of your struct LogView and place a period in front of:

alert(isPresented........

Thank You! It now works! I was trying to make a sign in page with firebase.

I also wanted to know how to get the sign in with apple capability without enrolling for the apple developer program. I have an account, but not enrolled yet.

I have not used the Apple Sign In process so can’t advise. Probably best to search online for “Apple Sign In tutorial”.
This might be of use: Apple Developer Documentation

Sorry to disturb again, but the same error is happening again. How should I debug this?

import SwiftUI

import Firebase

struct LoginView: View {

@AppStorage("log_Status") var status = false

var body: some View {

ZStack {
    if status {
        VStack(spacing: 25) {
            Text("Logged in as \(Auth.auth().currentUser? .email ?? "")")
            
            Button(action: {
                
            }, label: {
                SignOutButton()
            })
        }
    } else {
        LoginView()
    }
}

}

}

struct LoginView_Previews: PreviewProvider {
static var previews: some View {
LoginView()

}

}

struct LogView: View {

@StateObject var model = ModelData()

var body: some View {
    
    
    
    VStack {
        
        Spacer(minLength: 0)
        
        ZStack {
            if UIScreen.main.bounds.height < 750 {
                SignInImage()
                
            } else {
                SignInImage()
            }
        }
            .padding(.horizontal)
            .padding(.vertical, 20)
            .background(Color.white.opacity(0.2))
            .cornerRadius(30)
            
            
            
        VStack(spacing: 4) {
            HStack(spacing: 0){
                Text("Food = ")
                    .font(.system(size: 35))
                    .foregroundColor(Color.white)
                    .fontWeight(.semibold)
                
                Text("Life.")
                    .font(.system(size: 35))
                    .foregroundColor(Color.white)
                    .fontWeight(.bold)
            }
            
            Text("Let order some deliciousness!")
                
        }
        .padding(.top)
    
        
        
        VStack(spacing: 20){
            
            CustomTextField(image: "envelope", placeHolder: "Email", txt: $model.email)
            
            CustomTextField(image: "lock", placeHolder: "Password", txt: $model.password)
            
        }
        .padding(.top)
    
        Button(action: {
            model.login()
        }, label: {
            
            Text("Login")
                .fontWeight(.bold).foregroundColor(Color("Blue")) .padding(.vertical) .frame(width: UIScreen.main.bounds.width - 30)
                .background(Color.white) .clipShape(Capsule())
            
        })
        
        HStack(spacing: 12){
            Text("Don't have an account?") .foregroundColor(Color.white.opacity(0.7))
            
            Button(action: {model.isSignUp.toggle()}) {
                
                Text("Sign Up Now") .fontWeight(.bold) .foregroundColor(.white) } } .padding(.top,25)
        
            .padding(.bottom, 1)
        
        Button(action: {
            model.resetPassword()
        }) {
            Text("Forget Password?") .fontWeight(.bold) .foregroundColor(.white)
            
        }
        .padding(.top, 20)
        
        Divider()
        
    Spacer(minLength: 0)
    }
    .background(LinearGradient(gradient: Gradient(colors: [Color("Blue"), Color("Purple")]), startPoint: .top, endPoint: .bottom))
    .ignoresSafeArea(.all, edges: .all)
    .fullScreenCover(isPresented: $model.isSignUp){
        SignUpView(model: model)
    }
    .alert(isPresented: $model.alert, content: {
            Alert(title: Text("Message"), message: Text(model.alertMsg), dismissButton: .destructive(Text("Ok"))) }
    )
}

}

struct SignUpView: View {

@ObservedObject var model: ModelData

var body: some View {
     
    ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)) {
        VStack {
            Spacer(minLength: 0)
            
            ZStack {
                if UIScreen.main.bounds.height < 750 {
                    SignInImage()
                    
                } else {
                    SignInImage()
                }
            }
                .padding(.horizontal)
                .padding(.vertical, 20)
                .background(Color.white.opacity(0.2))
                .cornerRadius(30)
                
                
                
            VStack(spacing: 4) {
                HStack(spacing: 0){
                    Text("New ")
                        .font(.system(size: 35))
                        .foregroundColor(Color.white)
                        .fontWeight(.semibold)
                    
                    Text("Account")
                        .font(.system(size: 35))
                        .foregroundColor(Color.white)
                        .fontWeight(.bold)
                }
                
                Text("Create An Account!")
                    
            }
            .padding(.top)
        
            
            
            VStack(spacing: 20){
                
                CustomTextField(image: "envelope", placeHolder: "Email", txt: $model.email_SignUp)
                
                CustomTextField(image: "lock", placeHolder: "Password", txt: $model.password_SignUp)
                
                CustomTextField(image: "lock", placeHolder: "Re - Enter Password", txt: $model.reEnterPassword)
                
            }
            .padding(.top)
        
            Button(action: {
                model.signUp()
            }, label: {
                
                Text("Sign Up")
                    .fontWeight(.bold).foregroundColor(Color("Blue")) .padding(.vertical) .frame(width: UIScreen.main.bounds.width - 30)
                    .background(Color.white) .clipShape(Capsule())
                
            })
            
            Spacer(minLength: 0)
        }
        
        
        Button(action: {
            model.isSignUp.toggle()
        }, label: {
            Image(systemName: "xmark")
                .padding()
                .foregroundColor(.white)
                .background(Color.black.opacity(0.6)).clipShape(Circle())
        })
        .padding(.trailing)
        .padding(.top, 10)
        
    }
    .background(LinearGradient(gradient: Gradient(colors: [Color("Blue"), Color("Purple")]), startPoint: .top, endPoint: .bottom))
    .ignoresSafeArea(.all, edges: .all)
    }
}

struct CustomTextField : View {
var image : String
var placeHolder : String
@Binding var txt : String
var body: some View{
ZStack(alignment: Alignment(horizontal: .leading, vertical: .center)) {

        Image(systemName: image) .font(.system(size: 24)) .foregroundColor(Color("Purple")) .frame(width: 60, height: 60) .background(Color.white) .clipShape(Circle())
        
        ZStack{
            if placeHolder == "Password" || placeHolder == "Re-Enter"{ SecureField(placeHolder, text: $txt) } else{
                
                TextField(placeHolder, text: $txt) } } .padding(.horizontal) .padding(.leading,65) .frame(height: 60) .background(Color.white.opacity(0.2)) .clipShape(Capsule()) } .padding(.horizontal) } }

class ModelData: ObservableObject {

@Published var email = ""
@Published var password = ""
@Published var isSignUp = false
@Published var email_SignUp = ""
@Published var password_SignUp = ""
@Published var reEnterPassword = ""
@Published var resetEmail = ""
@Published var isLinkSend = false

@Published var alert = false
@Published var alertMsg = ""

@AppStorage("log_Status") var status = false

func resetPassword() {
    
    let alert = UIAlertController(title: "Reset Your Password", message: "Enter your email to reset your password.", preferredStyle: .alert)
    
    alert.addTextField { (password) in
        
        password.placeholder = "Email"
        
    }
    let proceed = UIAlertAction(title: "Reset", style: .default)
    
    self.resetEmail = alert.textFields![0].text!
    
    self.isLinkSend.toggle()
    
    let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: nil)
    
    alert.addAction(cancel)
    alert.addAction(proceed)
    
    
    UIApplication.shared.windows.first?.rootViewController?.present(alert, animated: true)
}

func login() {
    
    if email == "" || password == ""{
        
        self.alertMsg = "Fill in the contents properly."
        self.alert.toggle()
        return
        
    }
    Auth.auth().signIn(withEmail: email, password: password) { (result, err) in
        
        if err != nil {
            
            self.alertMsg = err!.localizedDescription
            self.alert.toggle()
            return
            
        }
        
    }
    
    let user = Auth.auth().currentUser
    
    if !user!.isEmailVerified {
        
        self.alertMsg = "Please verify your email."
        self.alert.toggle()
        
        try! Auth.auth().signOut()
        
        return
       
            withAnimation() {
                self.status = true
            }
    }
    
}

func signUp() {
    
}

}

What was the last change that you made that broke it?

You have posted a lot of code and it may only be in one of those structs that the problem exists so work backwards till you identify the problem.

Yes, I did that and it turns out that I put the file of my primary struct in the body instead of putting the file LogView. This was the error.

hey guys! I have just updated xCode to 12.5.1 and Preview in canvas shows the same error to me. Struggling to make it work but unsuccessful. My code has really simple structure for now… Does any one solved this issue?

The error will be due to something in your code. Please post some code so we can take a look.

@roosterboy you are right, it was due to incorrect spelling of some modifiers. I’m new to SwiftUI framework and still can’t figure out where to put dots and () in modifiers especially if there are a lot of them in a row

Just remember that ViewModifiers are method functions on the View struct, so you call them like any other method function. That means they are preceded by a period . and will always have parentheses, whether there are parameters or not.

So, for example:

.resizable()
.frame(width: 200, height: 200)
etc...
1 Like

Great! Alson got the same error message due to a missing period and found the solution here. Really confusing and missleading message.