[ RevenueCatUI ] - Custom Loading View for PaywallView and PaywallFooter

[kellvembarbosa]

• I have updated Purchases SDK to the latest version
• I have read the Contribution Guidelines
• I have searched the Community
• I have read docs.revenuecat.com
• I have searched for existing Github issues

The solution
Create an extension view similar to `onPurchaseCompleted/onRestoreCompleted´ that returns Bool to control the display of a Custom Loading View.

I have a custom loading throughout my application, but in RevenueCatUI I lose this UI consistency, because I did not find an "uncomplicated" way to do this simple action and receive the status of actionInBlock.
In my specific case I have an extension for the View called `.loading´ that receives a bool parameter with this implementation I could easily add my custom loading.

Por ex:

  @State
  private var displayPaywall: Bool = true

  @State
  private var isLoading: Bool = true

  var body: some View {
     ContentView()
         .sheet(isPresented: self.$displayPaywall) {
             PaywallView()
                 .onLoadingStatus { status in
                     self.isLoading = status
                }
                .loading(self.isLoading)
         }
  }

A positive point for this approach also works for `paywallFooter´ and taking complexity and adding customization to each project.

Already taking the opportunity to say that a `onUserCancel´ is also positive so that you can have the opportunity to track the event and also display an offer to the user, an opportunity in view of the fact that many checkouts are started and canceled.

1. Environment

   1. Platform: iOS
   2. SDK version: 4.26.0-beta.4
   3. StoreKit version:
      • StoreKit 1
      • StoreKit 2 (enabled with usesStoreKit2IfAvailable(true))
   4. OS version: 16
   5. Xcode version: 14
   6. Device and/or simulator:
      • Device
      • Simulator
   7. Environment:
      • Sandbox
      • TestFight
      • Production
   8. How widespread is the issue. Percentage of devices affected.

2. Debug logs that reproduce the issue. Complete logs with Purchases.logLevel = .verbose will help us debug this issue.

3. Steps to reproduce, with a description of expected vs. actual behavior
   Not necessary.

4. Another context that creates an inconsistency is when the paywall is displayed via shet where the user can close even after clicking buy due to the delay of the apple popup.
   It can be corrected with the developer obtaining the status and blocking the closure of the shet

[RCGitBot]

👀 We've just linked this issue to our internal tracker and notified the team. Thank you for reporting, we're checking this out!

[NachoSoto]

Thanks for the request! As you mentioned, PaywallView implements its own UI for the loading state. If you want to customize that yourself you could load the Offerings before presenting the PaywallView. That way you can have full control of the loading timeframe:

struct ContentView: View {
    @State
    private var displayPaywall: Bool = true

    var body: some View {
        ContentView()
            .sheet(isPresented: self.$displayPaywall) {
                LoadingPaywallView()
            }
    }
}

struct LoadingPaywallView: View {
    @State
    private var offering: Offering?

    var body: some View {
        Group {
            if let offering {
                // This will now be guaranteed to display without any loading delays
                PaywallView(offering: offering)
            } else {
                // You can show whatever you want here
                Text("Loading...")
            }
        }
        .task {
            // You'll need to do error handling too
            self.offering = try? await Purchases.shared.offerings().current
        }
    }
}

The same is true when using .paywallFooter. You can pass an Offering there as well.

Let us know if this solves your particular issue or if we can help with anything else!

[kellvembarbosa]

@NachoSoto I'm sorry if I wasn't clear, but the problem is not in loading the offer, I already do.

The issue is during the use of the Paywall provided by RevenueCatUI, it generates some inconsistencies I recorded a video to facilitate the explanation.

See that right after your answer I will delete the links to avoid exposing my application.

Video 1 - During the delay between displaying the Apple Store purchase popup, PaywallView does not have an interesting feedback screen for the user:
-- removed_link

The ideal would be:
-- removed_link
In this way we prevent the user from leaving the flow before the correct moment.

Video 2 - While the user waits for the purchase to be confirmed there is no "blocking" and he can continue browsing.
-- removed_link

These two situations could be easily solved, with the implementation of the extension above where I could provide the blocking of the shet and a custom loading screen as I showed in the "ideal".

[NachoSoto]

Thanks for the videos! Turns out that we lost the loading state for the purchase button, so I restored it: #3217

[kellvembarbosa]

Thank you for your beautiful work, this package is an evolution for RevenueCat, it will help a lot in a bottleneck that exists in the development of apps/paywalls.

I'm going to remove the links...

[github-actions]

This issue has been automatically locked due to no recent activity after it was closed. Please open a new issue for related reports.