update skeleton display and initial loading user interaction block

Author: softmarshmallow

editor/components/client-only.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const ClientOnly = ({ children, ...delegated }) => {
+  const [hasMounted, setHasMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  if (!hasMounted) return null;
+
+  return <React.Fragment {...delegated}>{children}</React.Fragment>;
+};
+
+export default ClientOnly;

editor/components/index.ts

@@ -3,3 +3,4 @@ export * as canvas from "./design-preview-as-is";
 export * as code from "./code-editor";
 export * as runner from "./app-runner";
 export * as visualization from "../../editor-packages/editor-debugger/components/visualization";
+export * from "./client-only";

editor/hooks/use-design.ts

@@ -15,7 +15,10 @@ import { convert } from "@design-sdk/figma-node-conversion";
 import { mapFigmaRemoteToFigma } from "@design-sdk/figma-remote/lib/mapper";
 import { useFigmaAccessToken } from ".";
 import { FileResponse } from "@design-sdk/figma-remote-types";
-import { FigmaDesignRepository } from "repository/figma-design-repository";
+import {
+  FigmaDesignRepository,
+  TFetchFileForApp,
+} from "repository/figma-design-repository";
 
 // globally configure auth credentials for interacting with `@design-sdk/figma-remote`
 configure_auth_credentials({
@@ -167,14 +170,14 @@ export function useDesign({
 }
 
 export function useDesignFile({ file }: { file: string }) {
-  const [designfile, setDesignFile] = useState<FileResponse>(null);
+  const [designfile, setDesignFile] = useState<TFetchFileForApp>(null);
   const fat = useFigmaAccessToken();
   useEffect(() => {
     if (file && (fat.accessToken || fat.personalAccessToken)) {
       async function handle() {
         const repo = new FigmaDesignRepository(fat);
         const iterator = repo.fetchFile(file);
-        let next: IteratorResult<FileResponse>;
+        let next: IteratorResult<TFetchFileForApp>;
         while ((next = await iterator.next()).done === false) {
           setDesignFile(next.value);
         }

editor/pages/files/[key]/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback, useReducer } from "react";
+import React, { useEffect, useCallback, useReducer, useState } from "react";
 import { useRouter } from "next/router";
 import { SigninToContinueBannerPrmoptProvider } from "components/prompt-banner-signin-to-continue";
 import { Editor, EditorDefaultProviders } from "scaffolds/editor";
@@ -13,6 +13,8 @@ export default function FileEntryEditor() {
   const { key } = router.query;
   const filekey = key as string;
 
+  const [loading, setLoading] = useState<boolean>(true);
+
   const [initialState, initialDispatcher] = useReducer(warmup.initialReducer, {
     type: "pending",
   });
@@ -28,6 +30,11 @@ export default function FileEntryEditor() {
 
   useEffect(() => {
     if (file) {
+      if (!file.__initial) {
+        // when full file is loaded, allow editor with user interaction.
+        setLoading(false);
+      }
+
       let val: EditorSnapshot;
 
       // TODO: seed this as well
@@ -76,7 +83,7 @@ export default function FileEntryEditor() {
     <SigninToContinueBannerPrmoptProvider>
       <StateProvider state={safe_value} dispatch={handleDispatch}>
         <EditorDefaultProviders>
-          <Editor />
+          <Editor loading={loading} />
         </EditorDefaultProviders>
       </StateProvider>
     </SigninToContinueBannerPrmoptProvider>

editor/repository/figma-design-repository/index.ts

@@ -1,6 +1,19 @@
 import { fetch } from "@design-sdk/figma-remote";
 import { FileResponse } from "@design-sdk/figma-remote-types";
-import { FigmaFileStore } from "store/fimga-file-store/figma-file-store";
+import {
+  FigmaFileStore,
+  FileResponseRecord,
+} from "store/fimga-file-store/figma-file-store";
+
+export type TFetchFileForApp = (
+  | fetch.FetchFileGeneratorReturnType
+  | FileResponseRecord
+) & {
+  /**
+   * rather this fetch is a initail fetch. this is used when blocking the user interaction until first initial whole file fetching on first entry.
+   */
+  __initial: boolean;
+};
 
 export class FigmaDesignRepository {
   constructor(
@@ -10,7 +23,7 @@ export class FigmaDesignRepository {
     const store = new FigmaFileStore(fileId);
     const existing = await store.get();
     if (existing) {
-      yield existing;
+      yield { ...existing, __initial: false } as TFetchFileForApp;
     }
 
     const _iter = fetch.fetchFile({ file: fileId, auth: this.auth });
@@ -19,18 +32,18 @@ export class FigmaDesignRepository {
       switch (next.value.__response_type) {
         case "pages":
           if (!existing) {
-            yield next.value;
+            yield { ...next.value, __initial: true } as TFetchFileForApp;
             store.upsert(next.value);
           }
           break;
         case "roots":
           if (!existing) {
-            yield next.value;
+            yield { ...next.value, __initial: true } as TFetchFileForApp;
             store.upsert(next.value);
           }
           break;
         case "whole":
-          yield next.value;
+          yield { ...next.value, __initial: false } as TFetchFileForApp;
           store.upsert(next.value);
           break;
       }

editor/scaffolds/editor/editor.tsx

@@ -22,7 +22,14 @@ import {
 } from "@design-sdk/core/assets-repository";
 import { useFigmaAccessToken } from "hooks";
 
-export function Editor() {
+export function Editor({
+  loading = false,
+}: {
+  /**
+   * explicitly set loading to block uesr interaction.
+   */
+  loading?: boolean;
+}) {
   const wstate = useWorkspaceState();
   const [state] = useEditorState();
 
@@ -51,13 +58,16 @@ export function Editor() {
 
   const _initially_loaded = state.design?.pages?.length > 0;
   const _initial_load_progress =
-    [!!state.design?.input, state.design?.pages?.length > 0].filter(Boolean)
-      .length / 2;
+    [!!state.design?.input, state.design?.pages?.length > 0, !loading].filter(
+      Boolean
+    ).length /
+      3 +
+    0.2;
 
   return (
     <>
-      {!_initially_loaded && (
-        <EditorSkeleton percent={_initial_load_progress + 0.2} />
+      {(loading || !_initially_loaded) && (
+        <EditorSkeleton percent={_initial_load_progress * 100} />
       )}
       <DefaultEditorWorkspaceLayout
         backgroundColor={colors.color_editor_bg_on_dark}

editor/scaffolds/editor/skeleton.tsx

@@ -4,14 +4,24 @@ import { HomeLogo } from "icons/home-logo";
 import { withStyles } from "@material-ui/core/styles";
 import Box from "@material-ui/core/Box";
 import LinearProgress from "@material-ui/core/LinearProgress";
+import ClientOnly from "components/client-only";
 
-export function EditorSkeleton({ percent = 0 }: { percent?: number }) {
+export function EditorSkeleton({
+  percent = 0,
+}: {
+  /**
+   * loading progress to display on progress bar
+   */
+  percent?: number;
+}) {
   return (
     <SkeletonWrap>
       <LoadingIndicatorContainer>
         <LogoAndLoading>
           <HomeLogo />
-          <ColoredLinearProgress />
+          <ClientOnly>
+            <ColoredLinearProgress value={percent} />
+          </ClientOnly>
         </LogoAndLoading>
         <TipsContainer />
       </LoadingIndicatorContainer>
@@ -68,7 +78,9 @@ const styles = (props) => ({
   },
 });
 
-const ColoredLinearProgress = withStyles(styles)(function (props) {
+const ColoredLinearProgress = withStyles(styles)(function (props: {
+  value?: number;
+}) {
   //@ts-ignore
   const { classes } = props;
   return (