From ae4dbe63add659b4a2d0c8aab543721b0a85ab60 Mon Sep 17 00:00:00 2001
From: Bruno Raimbault <bruno@dhis2.org>
Date: Thu, 12 Sep 2024 14:59:54 +0200
Subject: [PATCH] fix: add translucent prop to CachedDataQueryProvider
 (DHIS2-18029) (#1699)

translucent is optional and defaults to same value as before: true
In CachedDataQueryProvider, the translucent prop of the Layer component
was always true caused flashing grey backgrounds when loading main maps-app
and its plugin in dashboard.
---
 src/components/CachedDataQueryProvider.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/CachedDataQueryProvider.js b/src/components/CachedDataQueryProvider.js
index 47646a1f1..e4a3786d0 100644
--- a/src/components/CachedDataQueryProvider.js
+++ b/src/components/CachedDataQueryProvider.js
@@ -6,7 +6,12 @@ import React, { createContext, useContext } from 'react'
 
 const CachedDataQueryCtx = createContext({})
 
-const CachedDataQueryProvider = ({ query, dataTransformation, children }) => {
+const CachedDataQueryProvider = ({
+    query,
+    dataTransformation,
+    children,
+    translucent = true,
+}) => {
     const { data: rawData, ...rest } = useDataQuery(query)
     const { error, loading } = rest
     const data =
@@ -14,7 +19,7 @@ const CachedDataQueryProvider = ({ query, dataTransformation, children }) => {
 
     if (loading) {
         return (
-            <Layer translucent>
+            <Layer translucent={translucent}>
                 <CenteredContent>
                     <CircularLoader />
                 </CenteredContent>
@@ -43,6 +48,7 @@ CachedDataQueryProvider.propTypes = {
     children: PropTypes.node.isRequired,
     query: PropTypes.object.isRequired,
     dataTransformation: PropTypes.func,
+    translucent: PropTypes.bool,
 }
 
 const useCachedDataQuery = () => useContext(CachedDataQueryCtx)