fix: suppress screen flicker when judging useCore

reearth · Feb 17, 2023 · b1852dd · b1852dd
1 parent b51569e
commit b1852dd
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/src/components/pages/EarthEditor/index.tsx b/src/components/pages/EarthEditor/index.tsx
@@ -34,7 +34,10 @@ const EarthEditor: React.FC<Props> = () => {
           header={<Header />}
           left={<LeftMenu />}
           centerTop={<PrimitiveHeader />}
-          center={core ? <CoreCanvasArea inEditor /> : <CanvasArea inEditor />}
+          center={
+            typeof core == "boolean" &&
+            (core ? <CoreCanvasArea inEditor /> : <CanvasArea inEditor />)
+          }
           right={<RightMenu />}
         />
       </DndProvider>

diff --git a/src/components/pages/Preview/index.tsx b/src/components/pages/Preview/index.tsx
@@ -27,7 +27,8 @@ const PreviewPage: React.FC<Props> = () => {
     <ThemeProvider>
       <DndProvider>
         <AuthenticationRequiredPage>
-          {core ? <CoreCanvasArea isBuilt /> : <CanvasArea isBuilt />}
+          {typeof core === "boolean" &&
+            (core ? <CoreCanvasArea isBuilt /> : <CanvasArea isBuilt />)}
         </AuthenticationRequiredPage>
       </DndProvider>
     </ThemeProvider>

diff --git a/src/components/pages/Published/index.tsx b/src/components/pages/Published/index.tsx
@@ -11,9 +11,11 @@ const PublishedPage: React.FC<{
   alias?: string;
 }> = ({ alias }) => {
   const core = useCore("published", alias);
+
   return (
     <DndProvider>
-      {core ? <CorePublished alias={alias} /> : <Published alias={alias} />}
+      {typeof core === "boolean" &&
+        (core ? <CorePublished alias={alias} /> : <Published alias={alias} />)}
     </DndProvider>
   );
 };

diff --git a/src/util/use-core.ts b/src/util/use-core.ts
@@ -5,7 +5,10 @@ import { PublishedData } from "@reearth/components/organisms/Published/core/type
 import { useGetScenePropertyQuery } from "@reearth/gql";
 
 // TODO: Remove this hook when we use reearth/core completely.
-export const useCore = (type?: "published" | "earth_editor", alias?: string): boolean => {
+export const useCore = (
+  type?: "published" | "earth_editor",
+  alias?: string,
+): boolean | undefined => {
   const query = useMemo(() => new URLSearchParams(window.location.search), []);
   if (query.has("useCore") || type === undefined) {
     return query.has("useCore");
@@ -33,7 +36,7 @@ export const useCore = (type?: "published" | "earth_editor", alias?: string): bo
 
   if (type === "published") {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isCore, setIsCore] = useState(false);
+    const [isCore, setIsCore] = useState<boolean | undefined>(undefined);
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const actualAlias = useMemo(
       () => alias || new URLSearchParams(window.location.search).get("alias") || undefined,