Zoom toolbar reandered during load.

packages/editor/src/components/index.tsx

@@ -80,24 +80,22 @@ const Editor = ({
   const locale = options.locale;
   const msg = I18nMsg.loadLocaleData(locale);
 
-  const menubarConfiguration = buildAppBarConfig(
-    model,
-    options.mapTitle,
-    capability,
-    onAction,
-    accountConfiguration,
-    () => {
-      model.save(true);
-    },
-  );
-
-  // if the Toolbar is not hidden before the variable 'isMobile' is defined, it appears intermittently when the page loads
-  // if the Toolbar is not rendered, Menu.ts cant find buttons for create event listeners
-  // so, with this hack the Toolbar is rendered but no visible until the variable 'isMobile' is defined
   return (
     <ThemeProvider theme={editorTheme}>
       <IntlProvider locale={locale} messages={msg}>
-        <AppBar configurations={menubarConfiguration} />
+        <AppBar
+          configurations={buildAppBarConfig(
+            model,
+            options.mapTitle,
+            capability,
+            onAction,
+            accountConfiguration,
+            () => {
+              model.save(true);
+            },
+          )}
+        />
+
         <Popover
           id="popover"
           open={popoverOpen}
@@ -117,7 +115,7 @@ const Editor = ({
           ></Toolbar>
         )}
         <Toolbar
-          configurations={buildZoomToolbarConfig(capability, model?.getDesigner())}
+          configurations={buildZoomToolbarConfig(model, capability)}
           position={{
             position: {
               right: '7px',

packages/editor/src/components/toolbar/toolbarConfigBuilder.tsx

@@ -300,40 +300,45 @@ export function buildToolbarConfig(designer: Designer): ActionConfig[] {
   ];
 }
 
-export function buildZoomToolbarConfig(capability: Capability, designer: Designer): ActionConfig[] {
+export function buildZoomToolbarConfig(model: Editor, capability: Capability): ActionConfig[] {
-  if (!designer) return [];
-
   return [
     {
       icon: <CenterFocusStrongOutlinedIcon />,
       tooltip: $msg('CENTER_POSITION'),
       onClick: () => {
-        designer.zoomToFit();
+        model.getDesigner().zoomToFit();
       },
+      disabled: () => !model?.isMapLoadded(),
     },
     {
       // zoom value candidate, neds to fixit
       render: () => (
         <Box sx={{ p: 0.5 }}>
           <Typography variant="overline" color="gray">
-            %{Math.floor((1 / designer.getWorkSpace()?.getZoom()) * 100)}
+            %
+            {!model?.isMapLoadded()
+              ? 100
+              : Math.floor((1 / designer.getWorkSpace()?.getZoom()) * 100)}
           </Typography>
         </Box>
       ),
+      disabled: () => !model?.isMapLoadded(),
     },
     {
       icon: <ZoomInOutlinedIcon />,
       tooltip: $msg('ZOOM_IN'),
       onClick: () => {
-        designer.zoomIn();
+        model.getDesigner().zoomIn();
       },
+      disabled: () => !model?.isMapLoadded(),
     },
     {
       icon: <ZoomOutOutlinedIcon />,
       tooltip: $msg('ZOOM_OUT'),
       onClick: () => {
-        designer.zoomOut();
+        model.getDesigner().zoomOut();
       },
+      disabled: () => !model?.isMapLoadded(),
     },
     {
       icon: <KeyboardOutlined />,