From f55a09ff1f8035640ed96dd7e7e5625da3c2a8e1 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Fri, 21 Aug 2026 23:15:47 +0100
Subject: [PATCH] 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.
---
 .../Dashboard/common/TemplateEditor.jsx       | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/components/Dashboard/common/TemplateEditor.jsx b/src/components/Dashboard/common/TemplateEditor.jsx
index b0a5719a..c02b8e69 100644
--- a/src/components/Dashboard/common/TemplateEditor.jsx
+++ b/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
-              spinning={loading}
-              style={style}
-              styles={{ body: { height: '100%', padding: '22px' } }}
-            >
-              <TemplatePreview
-                objectData={objectData?.testObject}
-                documentTemplate={objectData}
-                loading={loading}
-                isEditing={isEditing}
+            <Spin spinning={loading} indicator={<LoadingOutlined />}>
+              <Card
+                spinning={loading}
                 style={style}
-                onTestObjectOpen={() => setTestObjectOpen(true)}
-                onPreviewMessage={handlePreviewMessage}
-                showTestObject={true}
-              />
-            </Card>
+                styles={{ body: { height: '100%', padding: '22px' } }}
+              >
+                <TemplatePreview
+                  objectData={objectData?.testObject}
+                  documentTemplate={objectData}
+                  loading={loading}
+                  isEditing={isEditing}
+                  style={style}
+                  onTestObjectOpen={() => setTestObjectOpen(true)}
+                  onPreviewMessage={handlePreviewMessage}
+                  showTestObject={true}
+                />
+              </Card>
+            </Spin>
           </Splitter.Panel>
         )}
         {collapseState.editor == true && (