Add loading state when the preview is loading

ref DEV-1692
authgear · Aug 19, 2024 · 58e612d · 58e612d
2 parents 6ccd909 + 8866cc9
commit 58e612d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/authui/src/inline-preview.ts b/authui/src/inline-preview.ts
@@ -3,6 +3,7 @@ import { PreviewableResourceController } from "./previewable-resource";
 import { injectCSSAttrs } from "./cssattrs";
 
 interface PreviewCustomisationMessage {
+  theme: string;
   cssVars: Record<string, string>;
   images: Record<string, string | null>;
   translations: Record<string, string>;
@@ -15,6 +16,7 @@ function parsePreviewCustomisationMessage(
     return null;
   }
   return {
+    theme: message.theme ?? "",
     cssVars: message.cssVars ?? {},
     images: message.images ?? {},
     translations: message.translations ?? {},
@@ -89,6 +91,11 @@ export class InlinePreviewController extends Controller {
       outlet?.setValue(value);
     }
 
+    el.classList.remove("dark");
+    if (customisationMessage.theme === "dark") {
+      el.classList.add("dark");
+    }
+
     injectCSSAttrs(document.documentElement);
   };
 }
diff --git a/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx b/portal/src/graphql/portal/DesignScreen/DesignScreen.tsx
@@ -807,6 +807,8 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
 
   const authUIIframeRef = useRef<HTMLIFrameElement | null>(null);
 
+  const [isIframeLoading, setIsIframeLoading] = useState(true);
+
   useEffect(() => {
     const message = mapDesignFormStateToPreviewCustomisationMessage(
       designForm.state
@@ -844,20 +846,23 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
   const src = useMemo(() => {
     const url = new URL(effectiveAppConfig.http?.public_origin ?? "");
     url.pathname = selectedPreviewPage;
-    url.searchParams.append("x_color_scheme", designForm.state.selectedTheme);
     url.searchParams.append("ui_locales", designForm.state.selectedLanguage);
     return url.toString();
   }, [
     effectiveAppConfig.http?.public_origin,
     designForm.state.selectedLanguage,
-    designForm.state.selectedTheme,
     selectedPreviewPage,
   ]);
 
+  useEffect(() => {
+    setIsIframeLoading(true);
+  }, [src]);
+
   const onLoadIframe = useCallback(() => {
     const message = mapDesignFormStateToPreviewCustomisationMessage(
       designForm.state
     );
+    setIsIframeLoading(false);
     authUIIframeRef.current?.contentWindow?.postMessage(message, "*");
   }, [designForm.state]);
 
@@ -892,6 +897,7 @@ const Preview: React.VFC<PreviewProps> = function Preview(props) {
           />
         ) : null}
       </div>
+      {isIframeLoading ? <ShowLoading /> : null}
       <iframe
         ref={authUIIframeRef}
         className={cn("w-full", "min-h-0", "flex-1", "border-none")}

diff --git a/portal/src/graphql/portal/DesignScreen/viewModel.ts b/portal/src/graphql/portal/DesignScreen/viewModel.ts
@@ -59,6 +59,7 @@ export function getSupportedPreviewPagesFromConfig(
 
 export interface PreviewCustomisationMessage {
   type: "PreviewCustomisationMessage";
+  theme: string;
   cssVars: Record<string, string>;
   images: Record<string, string | null>;
   translations: Record<string, string>;
@@ -127,6 +128,8 @@ export function mapDesignFormStateToPreviewCustomisationMessage(
     }
   }
 
+  const theme = state.selectedTheme;
+
   cssVars[CSSVariable.WatermarkDisplay] = state.showAuthgearLogo
     ? WatermarkEnabledDisplay
     : WatermarkDisabledDisplay;
@@ -146,6 +149,7 @@ export function mapDesignFormStateToPreviewCustomisationMessage(
 
   return {
     type: "PreviewCustomisationMessage",
+    theme,
     cssVars,
     images,
     translations,

diff --git a/portal/src/model/themeAuthFlowV2.ts b/portal/src/model/themeAuthFlowV2.ts
@@ -208,7 +208,7 @@ export const DEFAULT_DARK_THEME: CustomisableTheme = {
     backgroundColor: "#176df3",
     backgroundColorActive: "#235dba",
     backgroundColorHover: "#235dba",
-    labelColor: "#1c1c1e",
+    labelColor: "#f0f1f1",
     borderRadius: {
       type: "rounded",
       radius: "0.875em",