wait for styling to load for loading overlay

yext · Oct 24, 2023 · 097a748 · 097a748
1 parent ec05320
commit 097a748
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git a/packages/studio-ui/src/AppWithLazyLoading.tsx b/packages/studio-ui/src/AppWithLazyLoading.tsx
@@ -15,24 +15,26 @@ export default function AppWithLazyLoading() {
   ]);
   const componentsLoaded = loadedCount === totalCount;
   const [appLoaded, setAppLoaded] = useState(false);
+  const [stylesLoaded, setStylesLoaded] = useState(false);
+  const resourcesLoaded = appLoaded && stylesLoaded;
 
   useEffect(() => {
     loadComponents();
-    loadStyling();
+    void Promise.all(loadStyling()).then(() => setStylesLoaded(true));
     void AppPromise.then(() => setAppLoaded(true));
   }, []);
 
   return (
     <LoadingOverlay
-      loading={!componentsLoaded || !appLoaded}
+      loading={!componentsLoaded || !resourcesLoaded}
       overlay={
         <>
           {renderComponentLoadingProgress(
             loadedCount,
             totalCount,
             componentsLoaded
           )}
-          {renderBundleMessage(appLoaded)}
+          {renderResourcesLoadingMessage(resourcesLoaded)}
         </>
       }
     >
@@ -66,11 +68,11 @@ function renderComponentLoadingProgress(
   );
 }
 
-function renderBundleMessage(appLoaded: boolean) {
+function renderResourcesLoadingMessage(loadComplete: boolean) {
   const className = classNames("text-sky-600 mt-4", {
-    "animate-pulse": !appLoaded,
+    "animate-pulse": !loadComplete,
   });
-  const msg = appLoaded
+  const msg = loadComplete
     ? "Studio resources loaded!"
     : "... loading Studio resources ...";
 

diff --git a/packages/studio-ui/src/utils/loadUserAssets.tsx b/packages/studio-ui/src/utils/loadUserAssets.tsx
@@ -40,7 +40,7 @@ export function loadComponents(): Promise<void>[] {
  * is labeled with the absolute path to the corresponding
  * user styling file.
  */
-export function loadStyling(): void {
+export function loadStyling(): Promise<void>[] {
   const studioStore = useStudioStore.getState();
   const addLoadedStyle = studioStore.loadingProgress.addLoadedStyle;
   const pages = Object.values(studioStore.pages.pages);
@@ -58,8 +58,8 @@ export function loadStyling(): void {
     ...layouts,
     ...componentMetadatas,
   ]);
-  userStyleFilepaths.forEach((filepath) => {
-    void dynamicImportFromBrowser(filepath).then((styling) => {
+  return userStyleFilepaths.map((filepath) => {
+    return dynamicImportFromBrowser(filepath).then((styling) => {
       const styleEl = document.createElement("style");
       styleEl.innerText = styling.default;
       styleEl.setAttribute(USER_CUSTOM_STYLE_ATTRIBUTE, filepath);
@@ -71,9 +71,9 @@ export function loadStyling(): void {
 
 function getStyleImportsFromUserFiles(
   styleImporters: (ComponentMetadata | PageState | LayoutState)[]
-): Set<string> {
+): string[] {
   const styleImports = styleImporters.flatMap(
     (importer) => importer.styleImports
   );
-  return new Set(styleImports);
+  return [...new Set(styleImports)];
 }