src/components.rs

@@ -13,6 +13,7 @@ pub mod blog {
 
 pub mod display {
     pub mod bar_chart;
+    pub mod client_only;
     pub mod clipboard;
     pub mod tooltip;
 }

src/components/display/client_only.rs

@@ -0,0 +1,29 @@
+use yew::{function_component, html, use_state, Children, Html, Properties};
+use yew_hooks::use_effect_once;
+
+#[derive(Properties, PartialEq)]
+pub struct ClientOnlyProps {
+    #[prop_or_default]
+    pub children: Children,
+}
+
+#[function_component(ClientOnly)]
+pub fn client_only(props: &ClientOnlyProps) -> Html {
+    let loaded = use_state(|| false);
+
+    {
+        let loaded = loaded.clone();
+        use_effect_once(move || {
+            loaded.set(true);
+            || {}
+        })
+    }
+
+    if !*loaded {
+        html! {}
+    } else {
+        html! {
+            <>{props.children.clone()}</>
+        }
+    }
+}

src/pages/trading/position_size.rs

@@ -7,7 +7,10 @@ use yew_hooks::{use_async, UseAsyncHandle};
 
 use crate::{
     components::{
-        display::tooltip::{Tooltip, TooltipPosition},
+        display::{
+            client_only::ClientOnly,
+            tooltip::{Tooltip, TooltipPosition},
+        },
         fields::{
             currency::CurrencySelect,
             label::Label,
@@ -1340,18 +1343,20 @@ pub fn page() -> Html {
     html! {
         <AccountProvider>
             <PositionProvider>
-                <div class="container mx-auto my-8">
-                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-                        <AccountInfo />
-                        <PositionInfo />
+                <ClientOnly>
+                    <div class="container mx-auto my-8">
+                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                            <AccountInfo />
+                            <PositionInfo />
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
+                            <ReportPositionSize />
+                            <ReportStopLoss />
+                            <ReportTakeProfit />
+                            <ReportPlannedStopLoss />
+                        </div>
                     </div>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-8">
-                        <ReportPositionSize />
-                        <ReportStopLoss />
-                        <ReportTakeProfit />
-                        <ReportPlannedStopLoss />
-                    </div>
-                </div>
+                </ClientOnly>
             </PositionProvider>
         </AccountProvider>
     }