Add Entry Widget Loading view design

GliaWidgets/Sources/EntryWidget/EntryWidget.swift

@@ -136,6 +136,7 @@ private extension EntryWidget {
     }
 
     func showView(in parentView: UIView) {
+        self.environment.queuesMonitor.startMonitoring(queuesIds: self.queueIds)
         parentView.subviews.forEach { $0.removeFromSuperview() }
         let model = makeViewModel(showHeader: false)
         let view = makeView(model: model)
@@ -155,6 +156,7 @@ private extension EntryWidget {
     }
 
     func showSheet(in parentViewController: UIViewController) {
+        self.environment.queuesMonitor.startMonitoring(queuesIds: self.queueIds)
         let model = makeViewModel(showHeader: true)
         let view = makeView(model: model)
         let hostingController = UIHostingController(rootView: view)

GliaWidgets/Sources/EntryWidget/EntryWidgetView.swift

@@ -44,12 +44,28 @@ private extension EntryWidgetView {
         .maxSize()
         .padding(.horizontal)
         .applyColorTypeBackground(model.style.backgroundColor)
+        .redacted(reason: .placeholder)
     }
 
     @ViewBuilder
     func loadingView() -> some View {
-        ProgressView()
-            .progressViewStyle(.circular)
+        VStack(spacing: 0) {
+            if model.showHeader {
+                headerView()
+            }
+            mediaTypes(
+                [.secureMessaging, .secureMessaging, .secureMessaging, .secureMessaging],
+                isPlaceholder: true
+            )
+            .redacted(reason: .placeholder)
+            .disabled(true)
+            if model.showPoweredBy {
+                poweredByView()
+            }
+        }
+        .maxSize()
+        .padding(.horizontal)
+        .applyColorTypeBackground(model.style.backgroundColor)
     }
 
     @ViewBuilder
@@ -98,10 +114,18 @@ private extension EntryWidgetView {
 // MARK: - View Components
 private extension EntryWidgetView {
     @ViewBuilder
-    func mediaTypes(_ types: [EntryWidget.MediaTypeItem]) -> some View {
+    func mediaTypes(
+        _ types: [EntryWidget.MediaTypeItem],
+        isPlaceholder: Bool = false
+    ) -> some View {
         VStack(spacing: 0) {
             ForEach(types.indices, id: \.self) { index in
-                mediaTypeCell(mediaType: types[index])
+                if isPlaceholder {
+                    placeholderMediaTypeCell(mediaType: types[index])
+                } else {
+                    mediaTypeCell(mediaType: types[index])
+                }
+
                 Divider()
                     .height(model.sizeConstraints.dividerHeight)
                     .setColor(model.style.dividerColor)
@@ -147,6 +171,31 @@ private extension EntryWidgetView {
         }
     }
 
+    @ViewBuilder
+    func placeholderMediaTypeCell(mediaType: EntryWidget.MediaTypeItem) -> some View {
+        HStack(spacing: 16) {
+            Circle()
+                .fill(Color.baseShade.swiftUIColor().opacity(0.5))
+                .width(model.sizeConstraints.singleCellIconSize)
+                .height(model.sizeConstraints.singleCellIconSize)
+            VStack(alignment: .leading, spacing: 2) {
+                Text(mediaType.headline)
+                    .setFont(model.style.mediaTypeItem.titleFont)
+                    .setColor(Color.baseNormal)
+                Text(mediaType.subheadline)
+                    .setFont(model.style.mediaTypeItem.messageFont)
+                    .setColor(Color.baseNormal)
+            }
+        }
+        .maxWidth(alignment: .leading)
+        .height(model.sizeConstraints.singleCellHeight)
+        .applyColorTypeBackground(model.style.mediaTypeItem.backgroundColor)
+        .contentShape(.rect)
+        .onTapGesture {
+            model.selectMediaType(mediaType)
+        }
+    }
+
     @ViewBuilder
     func icon(_ image: UIImage) -> some View {
         image.asSwiftUIImage()

TestingApp/ViewController/ViewController.swift

@@ -337,7 +337,7 @@ extension ViewController {
                 switch result {
                 case .success:
                     self.catchingError {
-                        self.entryWidget = try? Glia.sharedInstance.getEntryWidget(queueIds: [""])
+                        self.entryWidget = try? Glia.sharedInstance.getEntryWidget(queueIds: [self.queueId])
                     }
                     completionBlock("SDK has been configured")
                     completion?(.success(()))