update helloworld template for component,

002_source/cms/src/components/_helloworld/index.tsx

@@ -6,6 +6,9 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import { Box } from '@mui/system';
 import { Trash as TrashIcon } from '@phosphor-icons/react/dist/ssr/Trash';
 
+import { logger } from '@/lib/default-logger';
+import { toast } from '@/components/core/toaster';
+
 interface PropsHelloworld {
   message: string;
 }
@@ -33,11 +36,21 @@ function InnerComponent(): React.JSX.Element {
 // RULES: sample of main component
 function MainComponent(): React.JSX.Element {
   const [state, setState] = React.useState<string>('');
+  const [loading, setLoading] = React.useState(true);
+  const [showError, setShowError] = React.useState<boolean>(false);
 
   React.useEffect(() => {
-    setState(funcHelloworld('hello'));
+    try {
+      setState(funcHelloworld('hello'));
+    } catch (error) {
+      setShowError(true);
+    }
+    setLoading(false);
   }, []);
 
+  if (loading) return <>Loading</>;
+  if (showError) return <>Error</>;
+
   // you should obey react/jsx-no-useless-fragment
   return (
     <Box>