Zoom toolbar reandered during load.

packages/editor/src/components/index.tsx

@@ -80,7 +80,11 @@ const Editor = ({
   const locale = options.locale;
   const msg = I18nMsg.loadLocaleData(locale);
 
-  const menubarConfiguration = buildAppBarConfig(
+  return (
+    <ThemeProvider theme={editorTheme}>
+      <IntlProvider locale={locale} messages={msg}>
+        <AppBar
+          configurations={buildAppBarConfig(
             model,
             options.mapTitle,
             capability,
@@ -89,15 +93,9 @@ const Editor = ({
             () => {
               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} />
         <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[] {
-  if (!designer) return [];
-
+export function buildZoomToolbarConfig(model: Editor, capability: Capability): ActionConfig[] {
   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 />,