From a4c02a712cc10b42b0e60c2e2772e73d0550e266 Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Sat, 7 Jun 2025 16:58:32 +0200
Subject: [PATCH] Update LanguageSelector and development page components for
 improved client behavior

- Changed LanguageSelectorComponent to use client:visible for better loading performance.
- Updated CollapsibleIntro and ContributionCalendar components to utilize client:visible, enhancing user experience by ensuring they load only when in view.
---
 src/components/LanguageSelector.astro | 2 +-
 src/layouts/Layout.astro              | 2 +-
 src/pages/[lang]/development.astro    | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/LanguageSelector.astro b/src/components/LanguageSelector.astro
index 3056e3a..1825c98 100644
--- a/src/components/LanguageSelector.astro
+++ b/src/components/LanguageSelector.astro
@@ -8,4 +8,4 @@ interface Props {
 const { defaultLang } = Astro.props;
 ---
 
-<LanguageSelectorComponent client:load defaultLang={defaultLang} />
+<LanguageSelectorComponent client:visible defaultLang={defaultLang} />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 2c7baec..f4b3742 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -74,7 +74,7 @@ const { language, textDirection } = I18N;
     <CookieBanner />
     <BackToTop />
     <!-- Start of Rocket.Chat Livechat Script -->
-    <script type="text/javascript">
+    <script type="text/javascript" defer>
       (function(w, d, s, u) {
         w.RocketChat = function(c) { w.RocketChat._.push(c) }; w.RocketChat._ = []; w.RocketChat.url = u;
         const h = d.getElementsByTagName(s)[0], j = d.createElement(s);
diff --git a/src/pages/[lang]/development.astro b/src/pages/[lang]/development.astro
index ff9cda6..eaa1de4 100644
--- a/src/pages/[lang]/development.astro
+++ b/src/pages/[lang]/development.astro
@@ -114,10 +114,10 @@ const formatDate = (dateString) => {
   <div class="max-w-4xl mx-auto px-4 py-8">
     <h1 class="text-xl sm:text-2xl md:text-4xl font-bold mb-4">{t.development.pageTitle || 'Development Progress'}</h1>
     {/* Collapsible Intro */}
-    <CollapsibleIntro text={t.development.intro} client:only="react" />
+    <CollapsibleIntro text={t.development.intro} client:visible />
     {/* Contribution Calendar */}
     <div class="mb-8">
-      <ContributionCalendar data={contributionData} client:only="react" />
+      <ContributionCalendar data={contributionData} client:visible />
     </div>
     <div class="space-y-8">
       <section>