From 994b691239cec11eefb24cc4fa262f633fa77cd3 Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <99215291+O2sa@users.noreply.github.com>
Date: Thu, 13 Aug 2026 03:27:16 +0300
Subject: [PATCH 1/2] fix: prevent theme flash on initial load

---
 app/layout.tsx                | 10 ++++++----
 components/theme-provider.tsx |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index cf1565a..5865918 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,7 +2,6 @@ import "./globals.css";
 import type { ReactNode } from "react";
 import type { Metadata } from "next";
 import { cookies, headers } from "next/headers";
-import Script from "next/script";
 import {
   DEFAULT_LOCALE,
   LOCALE_COOKIE,
@@ -112,10 +111,13 @@ export default async function RootLayout({ children }: { children: ReactNode })
 
   return (
     <html lang={initialLocale} dir={dir} suppressHydrationWarning>
+      <head>
+        <script
+          id="theme-init"
+          dangerouslySetInnerHTML={{ __html: themeInitScript }}
+        />
+      </head>
       <body>
-        <Script id="theme-init" strategy="beforeInteractive">
-          {themeInitScript}
-        </Script>
         <Providers initialLocale={initialLocale}>{children}</Providers>
       </body>
     </html>
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
index 75a06f3..cadf070 100644
--- a/components/theme-provider.tsx
+++ b/components/theme-provider.tsx
@@ -9,6 +9,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
       attribute="class"
       defaultTheme="system"
       enableSystem
+      enableColorScheme
       storageKey="devimpact-theme"
     >
       {children}

From 8b05b65a72d800af6a8b6890bb67d4728e5dc033 Mon Sep 17 00:00:00 2001
From: Osama Mabkhot <99215291+O2sa@users.noreply.github.com>
Date: Thu, 13 Aug 2026 23:26:36 +0300
Subject: [PATCH 2/2] fix: Prevent home page skeleton from covering the whole
 page

---
 app/page.tsx | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 7c58084..c3a57fe 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,9 @@
 import type { Metadata } from "next";
 import { Suspense } from "react";
-import { DashboardSkeleton } from "@/components/skeletons";
+import { AppFooter } from "@/components/app-footer";
+import { AppHeader } from "@/components/app-header";
 import { HomePageClient } from "@/components/home-page-client";
+import { Skeleton } from "@/components/ui/skeleton";
 import { JsonLd } from "@/components/seo/json-ld";
 import { toAbsoluteUrl } from "@/lib/seo";
 
@@ -63,11 +65,65 @@ const softwareSchema = {
   },
 };
 
+function HomePageFallback() {
+  return (
+    <main className="flex min-h-screen flex-col">
+      <AppHeader />
+
+      <div className="w-full flex-1 max-w-6xl mx-auto px-4 py-10 space-y-6">
+        <div className="rounded-2xl border border-border bg-card/90 p-6 shadow-lg backdrop-blur">
+          <div className="space-y-4 pb-4">
+            <Skeleton className="h-3 w-32 rounded-full" />
+            <Skeleton className="h-8 w-64 rounded-lg" />
+            <Skeleton className="h-4 w-full max-w-md rounded-lg" />
+          </div>
+
+          <div className="space-y-5">
+            <div className="grid gap-3 md:grid-cols-2">
+              <div className="space-y-1.5">
+                <Skeleton className="h-3 w-24 rounded-full" />
+                <Skeleton className="h-11 rounded-lg" />
+              </div>
+              <div className="space-y-1.5">
+                <Skeleton className="h-3 w-24 rounded-full" />
+                <Skeleton className="h-11 rounded-lg" />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-36 rounded-full" />
+              <div className="flex flex-wrap gap-2">
+                {Array.from({ length: 8 }).map((_, index) => (
+                  <Skeleton key={index} className="h-7 w-20 rounded-full" />
+                ))}
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-3">
+              <Skeleton className="h-10 w-40 rounded-lg" />
+              <Skeleton className="h-10 w-10 rounded-lg" />
+              <Skeleton className="h-10 w-10 rounded-lg" />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-col items-center justify-center gap-4 py-20 text-center">
+          <Skeleton className="h-24 w-24 rounded-full sm:h-32 sm:w-32" />
+          <Skeleton className="h-6 w-64 rounded-lg" />
+          <Skeleton className="h-4 w-72 rounded-lg" />
+        </div>
+      </div>
+
+      <AppFooter />
+    </main>
+  );
+}
+
 export default function HomePage() {
   return (
     <>
       <JsonLd data={[websiteSchema, softwareSchema]} />
-      <Suspense fallback={<DashboardSkeleton />}>
+      <Suspense fallback={<HomePageFallback />}>
         <HomePageClient />
       </Suspense>
     </>
