Refactor TemplateEditor to Improve Loading State Handling

- Wrapped the TemplatePreview component in a Spin component to provide a loading indicator while content is being loaded.
- Enhanced the structure of the TemplatePreview component by ensuring proper style and props are passed, improving user experience during loading states.

src/components/Dashboard/common/TemplateEditor.jsx

@@ -187,22 +187,24 @@ const TemplateEditor = ({
       <Splitter className={'farmcontrol-splitter'} vertical={true}>
         {collapseState.preview == true && (
           <Splitter.Panel style={{ height: '100%' }}>
-            <Card
+            <Spin spinning={loading} indicator={<LoadingOutlined />}>
-              spinning={loading}
+              <Card
-              style={style}
+                spinning={loading}
-              styles={{ body: { height: '100%', padding: '22px' } }}
-            >
-              <TemplatePreview
-                objectData={objectData?.testObject}
-                documentTemplate={objectData}
-                loading={loading}
-                isEditing={isEditing}
                 style={style}
-                onTestObjectOpen={() => setTestObjectOpen(true)}
+                styles={{ body: { height: '100%', padding: '22px' } }}
-                onPreviewMessage={handlePreviewMessage}
+              >
-                showTestObject={true}
+                <TemplatePreview
-              />
+                  objectData={objectData?.testObject}
-            </Card>
+                  documentTemplate={objectData}
+                  loading={loading}
+                  isEditing={isEditing}
+                  style={style}
+                  onTestObjectOpen={() => setTestObjectOpen(true)}
+                  onPreviewMessage={handlePreviewMessage}
+                  showTestObject={true}
+                />
+              </Card>
+            </Spin>
           </Splitter.Panel>
         )}
         {collapseState.editor == true && (