slice-machine-ui 2.18.1-beta.7 → 2.18.1-beta.8

package/src/features/sync/AutoSyncProvider.tsx

@@ -83,7 +83,7 @@ export const AutoSyncProvider: FC<PropsWithChildren> = (props) => {
 
         // We default to a full user logged in with internet access if not provider.
         // This is useful when we want to sync changes right after the user logs in.
-        loggedIn = isOnline && authStatus === AuthStatus.AUTHORIZED,
+        loggedIn = isOnline && authStatus === AuthStatus.AUTHENTICATED,
       } = args;
 
       if (!loggedIn || environment?.kind !== "dev") {
@@ -240,7 +240,7 @@ function getAutoSyncStatus(args: GetAutoSyncStatusArgs): AutoSyncStatus {
     return "offline";
   }
 
-  if (authStatus !== AuthStatus.AUTHORIZED) {
+  if (authStatus !== AuthStatus.AUTHENTICATED) {
     return "not-logged-in";
   }
 

package/src/features/sync/getUnSyncChanges.ts

@@ -149,9 +149,7 @@ export const getModelStatus = (args: GetModelStatusArgs): ModelsStatuses => {
   const { slices, customTypes, isOnline, authStatus } = args;
 
   const userHasAccessToModels =
-    isOnline &&
-    authStatus != AuthStatus.FORBIDDEN &&
-    authStatus != AuthStatus.UNAUTHORIZED;
+    isOnline && authStatus === AuthStatus.AUTHENTICATED;
 
   const modelsStatuses = {
     slices: computeStatuses(slices, userHasAccessToModels),

package/src/legacy/components/AppLayout/index.tsx

@@ -1,16 +1,6 @@
-import {
-  BlankSlate,
-  BlankSlateDescription,
-  BlankSlateIcon,
-  BlankSlateTitle,
-  Box,
-  Button,
-  ButtonGroup,
-  Text,
-} from "@prismicio/editor-ui";
-import { isUnauthorizedError } from "@slicemachine/manager/client";
+import { Box, Button, ButtonGroup } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
-import { FC, PropsWithChildren, Suspense, useState } from "react";
+import { FC, PropsWithChildren, Suspense } from "react";
 
 import { Breadcrumb } from "@/components/Breadcrumb";
 import {
@@ -19,8 +9,6 @@ import {
   PageLayoutHeader,
   PageLayoutPane,
 } from "@/components/PageLayout";
-import { ErrorBoundary } from "@/ErrorBoundary";
-import { LogoutButton } from "@/features/auth/LogoutButton";
 import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { Navigation } from "@/features/navigation/Navigation";
 
@@ -29,80 +17,17 @@ export const AppLayout: FC<PropsWithChildren> = ({
   ...otherProps
 }) => {
   return (
-    <ErrorBoundary
-      renderError={(error) => {
-        return (
-          <Box
-            position="absolute"
-            top={64}
-            width="100%"
-            justifyContent="center"
-            flexDirection="column"
-          >
-            <BlankSlate>
-              <BlankSlateIcon
-                lineColor="tomato11"
-                backgroundColor="tomato3"
-                name="alert"
-              />
-              <BlankSlateTitle>Failed to load Slice Machine</BlankSlateTitle>
-              <BlankSlateDescription>
-                <RenderError error={error} />
-              </BlankSlateDescription>
-            </BlankSlate>
-          </Box>
-        );
-      }}
-    >
-      <Suspense>
-        <PageLayoutWithActiveEnvironment {...otherProps}>
-          <PageLayoutPane>
-            <Navigation />
-          </PageLayoutPane>
-          {children}
-        </PageLayoutWithActiveEnvironment>
-      </Suspense>
-    </ErrorBoundary>
+    <Suspense>
+      <PageLayoutWithActiveEnvironment {...otherProps}>
+        <PageLayoutPane>
+          <Navigation />
+        </PageLayoutPane>
+        {children}
+      </PageLayoutWithActiveEnvironment>
+    </Suspense>
   );
 };
 
-function RenderError(args: { error: unknown }) {
-  const { error } = args;
-
-  if (isUnauthorizedError(error)) {
-    return <UnauthorizedErrorView />;
-  }
-  return <>{JSON.stringify(error)}</>;
-}
-
-function UnauthorizedErrorView() {
-  const [isLoggingOut, setIsLoggingOut] = useState(false);
-
-  return (
-    <Box flexDirection="column" gap={16} margin={{ top: 8 }}>
-      <Box flexDirection="column" gap={8} alignItems="center">
-        <Text variant="h3" align="center">
-          It seems like you don't have access to this repository
-        </Text>
-        <Text align="center">
-          Check that the repository name is correct, then contact your
-          repository administrator.
-        </Text>
-      </Box>
-      <LogoutButton
-        isLoading={isLoggingOut}
-        onLogoutSuccess={() => {
-          setIsLoggingOut(true);
-          window.location.reload();
-        }}
-        sx={{ alignSelf: "center" }}
-      >
-        Log out
-      </LogoutButton>
-    </Box>
-  );
-}
-
 const environmentTopBorderColorMap = {
   prod: "purple",
   stage: "indigo",

package/src/legacy/components/ChangesEmptyState/UnauthenticatedView.tsx

@@ -0,0 +1,31 @@
+import { Box, Button, Text } from "@prismicio/editor-ui";
+
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+export const UnauthenticatedView = () => {
+  const { openLoginModal } = useSliceMachineActions();
+
+  return (
+    <Box
+      flexDirection="column"
+      height="100%"
+      alignItems="center"
+      justifyContent="center"
+      gap={8}
+    >
+      <Text variant="h3" align="center">
+        It seems like you are logged out
+      </Text>
+      <Text align="center">Log in to connect to your repository.</Text>
+      <Text align="center">
+        If that doesn't work, it's possible that Slice Machine is having trouble
+        accessing Prismic's servers.{" "}
+        <Text href="https://community.prismic.io/">
+          Contact our support team
+        </Text>
+        .
+      </Text>
+      <Button onClick={() => openLoginModal()}>Log in to Prismic</Button>
+    </Box>
+  );
+};

package/src/legacy/components/ChangesEmptyState/index.ts

@@ -1,2 +1,2 @@
-export { AuthErrorPage } from "./AuthErrorPage";
 export { OfflinePage } from "./OfflinePage";
+export { UnauthenticatedView } from "./UnauthenticatedView";

package/src/legacy/components/ChangesItems/ChangesItems.tsx

@@ -3,7 +3,7 @@ import React, { Suspense } from "react";
 import { AiOutlineExclamationCircle } from "react-icons/ai";
 
 import { countMissingScreenshots } from "@/domain/slice";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/features/errorBoundaries";
 import { SharedSliceCard } from "@/features/slices/sliceCards/SharedSliceCard";
 import { ModelsStatuses } from "@/features/sync/getUnSyncChanges";
 import { useScreenshotChangesModal } from "@/hooks/useScreenshotChangesModal";
@@ -146,11 +146,11 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
           )}
         </Box>
 
-        <ErrorBoundary>
+        <DefaultErrorBoundary>
           <Suspense>
             <DevCollaborationExperiment />
           </Suspense>
-        </ErrorBoundary>
+        </DefaultErrorBoundary>
       </Box>
     </>
   );

package/src/legacy/components/LoginModal/index.tsx

@@ -1,3 +1,4 @@
+import { useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import Modal from "react-modal";
 import { useSelector } from "react-redux";
@@ -15,8 +16,8 @@ import {
 
 import { checkAuthStatus, clearAuth, getState } from "@/apiClient";
 import { getActiveEnvironment } from "@/features/environments/actions/getActiveEnvironment";
-import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
-import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
+import { GetActiveEnvironmentQueryKey } from "@/features/environments/useActiveEnvironment";
+import { GetEnvironmentsQueryKey } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { getUnSyncedChanges } from "@/features/sync/getUnSyncChanges";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
@@ -54,6 +55,7 @@ const LoginModal: React.FunctionComponent = () => {
   const { syncChanges } = useAutoSync();
   const { closeModals, startLoadingLogin, stopLoadingLogin, refreshState } =
     useSliceMachineActions();
+  const queryClient = useQueryClient();
 
   const prismicBase = preferWroomBase(env.manifest.apiEndpoint);
   const loginRedirectUrl = `${
@@ -79,8 +81,14 @@ const LoginModal: React.FunctionComponent = () => {
       );
 
       // refresh queries to update the UI
-      invalidateEnvironmentsData();
-      invalidateActiveEnvironmentData();
+      await Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: GetEnvironmentsQueryKey,
+        }),
+        queryClient.invalidateQueries({
+          queryKey: GetActiveEnvironmentQueryKey,
+        }),
+      ]);
 
       toast.success("Logged in");
       stopLoadingLogin();
@@ -100,7 +108,7 @@ const LoginModal: React.FunctionComponent = () => {
         ),
       );
       const { changedCustomTypes, changedSlices } = getUnSyncedChanges({
-        authStatus: AuthStatus.AUTHORIZED,
+        authStatus: AuthStatus.AUTHENTICATED,
         customTypes,
         isOnline: true,
         libraries: serverState.libraries,
@@ -127,7 +135,7 @@ const LoginModal: React.FunctionComponent = () => {
 
   return (
     <SliceMachineModal
-      isOpen={isOpen}
+      isOpen={isLoginLoading || isOpen}
       shouldCloseOnOverlayClick
       onRequestClose={closeModals}
       contentLabel={"login_modal"}

package/src/legacy/components/Navigation/ChangesItem.tsx

@@ -82,16 +82,12 @@ export const ChangesCount: FC<ChangesCountProps> = ({ color }) => {
 
   if (
     !isOnline ||
-    authStatus === AuthStatus.UNAUTHORIZED ||
-    authStatus === AuthStatus.FORBIDDEN
+    authStatus !== AuthStatus.AUTHENTICATED ||
+    numberOfChanges === 0
   ) {
     return null;
   }
 
-  if (numberOfChanges === 0) {
-    return null;
-  }
-
   const formattedNumberOfChanges = numberOfChanges > 9 ? "+9" : numberOfChanges;
 
   return (

package/src/legacy/components/Navigation/Environment.tsx

@@ -5,7 +5,7 @@ import {
 import { useState } from "react";
 
 import { getState, telemetry } from "@/apiClient";
-import { setEnvironment } from "@/features/environments/actions/setEnvironment";
+import { useSetEnvironment } from "@/features/environments/actions/useSetEnvironment";
 import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { useEnvironments } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
@@ -28,6 +28,7 @@ export function Environment() {
   const authStatus = useAuthStatus();
   const [isSwitchingEnv, setIsSwitchingEnv] = useState(false);
   const { autoSyncStatus } = useAutoSync();
+  const setEnvironment = useSetEnvironment();
 
   async function onSelect(environment: EnvironmentType) {
     if (activeEnvironment?.name === environment.name) {
@@ -105,10 +106,4 @@ export function Environment() {
       />
     );
   }
-
-  if (useEnvironmentsError !== undefined) {
-    throw useEnvironmentsError;
-  }
-
-  throw activeEnvironmentError;
 }

package/src/legacy/components/Navigation/SideNavEnvironmentSelector/SideNavEnvironmentSelector.tsx

@@ -17,9 +17,8 @@ import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import type { Environment } from "@slicemachine/manager/client";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
-import { toast } from "react-toastify";
 
-import { LogoutButton } from "@/features/auth/LogoutButton";
+import { EnvironmentLogoutButton } from "@/features/auth/LogoutButton";
 import { LoginIcon } from "@/icons/LoginIcon";
 import { LogoIcon } from "@/icons/LogoIcon";
 
@@ -30,7 +29,7 @@ type SideNavEnvironmentSelectorProps = {
   disabled?: boolean;
   environments?: Environment[];
   loading?: boolean;
-  variant?: "default" | "offline" | "unauthorized" | "unauthenticated";
+  variant?: "default" | "offline" | "unauthenticated";
   onLogInClick?: () => void;
   onSelect?: (environment: Environment) => void | Promise<void>;
 };
@@ -141,11 +140,7 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
               />
             ) : undefined}
 
-            {variant === "default" && (
-              <LogoutButton
-                onLogoutSuccess={() => toast.success("Logged out")}
-              />
-            )}
+            {variant === "default" && <EnvironmentLogoutButton />}
           </Box>
         </>
       )}

package/src/legacy/components/Simulator/index.tsx

@@ -17,7 +17,7 @@ import { toast } from "react-toastify";
 import { BaseStyles, Box, Flex, Spinner } from "theme-ui";
 
 import { saveSliceMock, telemetry } from "@/apiClient";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { DefaultErrorBoundary } from "@/features/errorBoundaries";
 import useThrottle from "@/hooks/useThrottle";
 import ScreenshotPreviewModal from "@/legacy/components/ScreenshotPreviewModal";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
@@ -287,7 +287,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
                 overflowY: "auto",
               }}
             >
-              <ErrorBoundary
+              <DefaultErrorBoundary
                 renderError={() => (
                   <DefaultErrorMessage
                     title="Editor error"
@@ -315,7 +315,7 @@ const Simulator: FC<SimulatorProps> = ({ slice, variation }) => {
                     />
                   </QueryClientProvider>
                 </Suspense>
-              </ErrorBoundary>
+              </DefaultErrorBoundary>
             </Flex>
           ) : null}
         </Flex>

package/src/legacy/lib/builders/CustomTypeBuilder/TabZone/index.tsx

@@ -20,8 +20,8 @@ import {
   reorderField,
   updateField,
 } from "@/domain/customType";
-import { ErrorBoundary } from "@/ErrorBoundary";
 import { useCustomTypeState } from "@/features/customTypes/customTypesBuilder/CustomTypeProvider";
+import { DefaultErrorBoundary } from "@/features/errorBoundaries";
 import {
   CustomTypes,
   type TabField,
@@ -246,7 +246,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
   };
 
   return (
-    <ErrorBoundary>
+    <DefaultErrorBoundary>
       <Suspense
         fallback={
           <Box padding={32}>
@@ -297,7 +297,7 @@ const TabZone: FC<TabZoneProps> = ({ tabId }) => {
           />
         </List>
       </Suspense>
-    </ErrorBoundary>
+    </DefaultErrorBoundary>
   );
 };
 

package/src/modules/userContext/index.ts

@@ -1,3 +1,4 @@
+import { UnauthenticatedError } from "@slicemachine/manager/client";
 import { Reducer } from "redux";
 import { ActionType, createAction, getType } from "typesafe-actions";
 
@@ -90,13 +91,12 @@ const getAuthStatus = (
 ): AuthStatus => {
   switch (clientError?.status) {
     case undefined: {
-      return AuthStatus.AUTHORIZED;
-    }
-    case 403: {
-      return AuthStatus.UNAUTHORIZED;
+      return AuthStatus.AUTHENTICATED;
     }
     case 401: {
-      return AuthStatus.FORBIDDEN;
+      if (clientError.name === new UnauthenticatedError().name) {
+        return AuthStatus.UNAUTHENTICATED;
+      }
     }
     default: {
       return AuthStatus.UNKNOWN;

package/src/modules/userContext/types.ts

@@ -1,7 +1,6 @@
 export enum AuthStatus {
-  AUTHORIZED = "authorized",
-  UNAUTHORIZED = "unauthorized",
-  FORBIDDEN = "forbidden",
+  AUTHENTICATED = "authenticated",
+  UNAUTHENTICATED = "unauthenticated",
   UNKNOWN = "unknown",
 }
 

package/src/pages/_app.tsx

@@ -13,34 +13,33 @@ import "@/styles/starry-night.css";
 import "@/styles/tabs.css";
 import "@/styles/toaster.css";
 
+import { ThemeProvider, TooltipProvider } from "@prismicio/editor-ui";
 import {
-  Box,
-  DefaultErrorMessage,
-  ThemeProvider,
-  TooltipProvider,
-} from "@prismicio/editor-ui";
-import { ConnectedRouter } from "connected-next-router";
+  isInvalidActiveEnvironmentError,
+  isUnauthorizedError,
+} from "@slicemachine/manager/client";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { ConnectedRouter as StoreConnectedRouter } from "connected-next-router";
 import type { NextPage } from "next";
 import type { AppContext, AppInitialProps } from "next/app";
 import dynamic from "next/dynamic";
 import Head from "next/head";
 import Router from "next/router";
-import { type FC, type ReactNode, Suspense, useEffect, useState } from "react";
+import { type FC, type ReactNode, Suspense, useEffect } from "react";
 import { Provider } from "react-redux";
-import type { Store } from "redux";
-import type { Persistor } from "redux-persist/es/types";
 import { PersistGate } from "redux-persist/integration/react";
 import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
 import { getState } from "@/apiClient";
-import { ErrorBoundary } from "@/ErrorBoundary";
+import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
+import { AppStateErrorBoundary } from "@/features/errorBoundaries";
 import { AutoSyncProvider } from "@/features/sync/AutoSyncProvider";
 import { RouteChangeProvider } from "@/hooks/useRouteChange";
 import SliceMachineApp from "@/legacy/components/App";
 import LoadingPage from "@/legacy/components/LoadingPage";
 import ToastContainer from "@/legacy/components/ToasterContainer";
 import { normalizeFrontendCustomTypes } from "@/legacy/lib/models/common/normalizers/customType";
-import type ServerState from "@/legacy/lib/models/server/ServerState";
+import { QueryClientProvider } from "@/queryClient";
 import configureStore from "@/redux/store";
 import theme from "@/theme";
 
@@ -68,50 +67,10 @@ const RemoveDarkMode: FC<RemoveDarkModeProps> = ({ children }) => {
   return <>{children}</>;
 };
 
-function App({
-  Component,
-  pageProps,
-}: AppContextWithComponentLayout & AppInitialProps) {
-  const [serverState, setServerState] = useState<ServerState | null>(null);
-  const [smStore, setSMStore] = useState<{
-    store: Store;
-    persistor: Persistor;
-  } | null>(null);
+function App(props: AppContextWithComponentLayout & AppInitialProps) {
+  const { Component } = props;
 
-  useEffect(() => {
-    async function getInitialState() {
-      const serverState = await getState();
-      setServerState(serverState);
-    }
-    void getInitialState();
-  }, []);
-
-  useEffect(() => {
-    if (!serverState || smStore) {
-      return;
-    }
-
-    const normalizedCustomTypes = normalizeFrontendCustomTypes(
-      serverState.customTypes,
-      serverState.remoteCustomTypes,
-    );
-
-    const { store, persistor } = configureStore({
-      environment: serverState.env,
-      availableCustomTypes: {
-        ...normalizedCustomTypes,
-      },
-      slices: {
-        libraries: serverState.libraries,
-        remoteSlices: serverState.remoteSlices,
-      },
-    });
-
-    setSMStore({ store, persistor });
-  }, [serverState, smStore]);
-
-  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-  const ComponentLayout = Component.CustomLayout || SliceMachineApp;
+  const ComponentLayout = Component.CustomLayout ?? SliceMachineApp;
 
   return (
     <>
@@ -119,50 +78,89 @@ function App({
         <title>Slice Machine</title>
       </Head>
       <ThemeUIThemeProvider theme={theme}>
-        <RemoveDarkMode>
-          <ThemeProvider mode="light">
-            <TooltipProvider>
-              {!smStore || !serverState ? (
-                <LoadingPage />
-              ) : (
-                <Provider store={smStore.store}>
-                  <ConnectedRouter Router={Router}>
-                    <PersistGate loading={null} persistor={smStore.persistor}>
-                      <ErrorBoundary
-                        renderError={() => (
-                          <Box
-                            justifyContent="center"
-                            width="100%"
-                            padding={80}
-                          >
-                            <DefaultErrorMessage
-                              title="Error"
-                              description="An error occurred while rendering the app."
-                            />
-                          </Box>
-                        )}
-                      >
-                        <Suspense fallback={<LoadingPage />}>
-                          <AutoSyncProvider>
-                            <RouteChangeProvider>
-                              <ComponentLayout>
-                                <Component {...pageProps} />
-                              </ComponentLayout>
-                            </RouteChangeProvider>
-                          </AutoSyncProvider>
-                        </Suspense>
-                      </ErrorBoundary>
-                    </PersistGate>
-                  </ConnectedRouter>
-                  <ToastContainer />
-                </Provider>
-              )}
-            </TooltipProvider>
-          </ThemeProvider>
-        </RemoveDarkMode>
+        <QueryClientProvider>
+          <RemoveDarkMode>
+            <ThemeProvider mode="light">
+              <TooltipProvider>
+                <AppStateErrorBoundary>
+                  <Suspense fallback={<LoadingPage />}>
+                    <AppStateValidator>
+                      <AppStateWrapper>
+                        <AutoSyncProvider>
+                          <ComponentLayout>
+                            <Component {...props.pageProps} />
+                          </ComponentLayout>
+                        </AutoSyncProvider>
+                      </AppStateWrapper>
+                    </AppStateValidator>
+                  </Suspense>
+                </AppStateErrorBoundary>
+                <ToastContainer />
+              </TooltipProvider>
+            </ThemeProvider>
+          </RemoveDarkMode>
+        </QueryClientProvider>
       </ThemeUIThemeProvider>
     </>
   );
 }
 
+/** This is where we should check for unwanted states that should prevent the
+ * user from using the app, and trigger the {@link AppStateErrorBoundary} to
+ * display something explaining why. */
+function AppStateValidator(props: { children: ReactNode }) {
+  const activeEnvironment = useActiveEnvironment({ suspense: true });
+
+  if (
+    // We're using the fetchEnvironments request to check this because it can
+    // return an SMUnauthorizedError or SMInvalidActiveEnvironmentError
+    // according to the API response, so we handle both cases with just one
+    // request. We also perform the request in other parts of the app, so it can
+    // reuse its cache.
+    isUnauthorizedError(activeEnvironment.error) ||
+    isInvalidActiveEnvironmentError(activeEnvironment.error)
+  ) {
+    throw activeEnvironment.error;
+  }
+
+  return <>{props.children}</>;
+}
+
+function AppStateWrapper({ children }: { children: ReactNode }) {
+  const { data: state } = useSuspenseQuery({
+    queryKey: ["getInitialState"],
+    queryFn: async () => {
+      const serverState = await getState();
+      const { store, persistor } = configureStore({
+        environment: serverState.env,
+        availableCustomTypes: {
+          ...normalizeFrontendCustomTypes(
+            serverState.customTypes,
+            serverState.remoteCustomTypes,
+          ),
+        },
+        slices: {
+          libraries: serverState.libraries,
+          remoteSlices: serverState.remoteSlices,
+        },
+      });
+
+      return { serverState, store, persistor };
+    },
+    // avoid refetching
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+
+  return (
+    <Provider store={state.store}>
+      <StoreConnectedRouter Router={Router}>
+        <PersistGate loading={null} persistor={state.persistor}>
+          <RouteChangeProvider>{children}</RouteChangeProvider>
+        </PersistGate>
+      </StoreConnectedRouter>
+    </Provider>
+  );
+}
+
 export default dynamic(() => Promise.resolve(App), { ssr: false });