#2310 add placeholder during search load

DavidBlaa · DavidBlaa · commit 566cfe51950a · 2025-12-12T11:42:45.000+01:00
diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/app.html b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/app.html
@@ -7,10 +7,12 @@
 		%sveltekit.head%
 	</head>
 	<body data-theme="bexis2theme">
-		<div id="taginfo" dataset="7" withMinor="false">
-			<div id="curation" dataset-id="0">
-				%sveltekit.body%
-			</div>
+		<div id="search" search_result_presentation="cards"> 
+			<div id="taginfo" dataset="7" withMinor="false">
+				<div id="curation" dataset-id="0">
+					%sveltekit.body%
+				</div>
+		</div>
 	</div>
 	</body>
 </html>
diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/lib/components/CardsPlaceHolder.svelte b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/lib/components/CardsPlaceHolder.svelte
@@ -0,0 +1,15 @@
+<script>
+
+</script>
+
+<div class="flex flex-col gap-4 grow min-w-[500px]">
+ <p class="text-muted text-sm">
+		...loading
+	</p>
+
+	<div		class="placeholder animate-pulse h-36 w-full p-4 px-5 border rounded-md "/>
+	<div		class="placeholder animate-pulse h-36 w-full p-4 px-5 border rounded-md "/>
+	<div		class="placeholder animate-pulse h-36 w-full p-4 px-5 border rounded-md  "/>
+	<div		class="placeholder animate-pulse h-36 w-full p-4 px-5 border rounded-md  "/>
+</div>
+
diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/lib/components/Search.svelte b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/lib/components/Search.svelte
@@ -6,7 +6,7 @@
 
 	import { RadioGroup, RadioItem, SlideToggle } from '@skeletonlabs/skeleton';
 
-	import { Api, Facets, Page, pageContentLayoutType, Table } from '@bexis2/bexis2-core-ui';
+	import { Api, Facets, Page, pageContentLayoutType, Table, TablePlaceholder } from '@bexis2/bexis2-core-ui';
 	import type { Columns, FacetGroup, linkType, TableConfig } from '@bexis2/bexis2-core-ui';
 
 	import Cards from '$lib/components/Cards.svelte';
@@ -17,6 +17,7 @@
 	import { convertTableData } from '$lib/helpers';
 	import { onMount } from 'svelte';
 	import { writable } from 'svelte/store';
+	import CardsPlaceHolder from './CardsPlaceHolder.svelte';
 
 	export let controller: string = 'search';
 
@@ -26,7 +27,10 @@
 	let currentCategory = 'All';
 	let q = '';
 
-	let currentView: 'table' | 'cards' = 'table';
+			// get data from parent
+			let container = document.getElementById('search');
+			let currentView:string =  ""+container?.getAttribute('search_result_presentation'); //'table' | 'cards' = 'table';
+
 
 	let facetsRef: any;
 
@@ -399,29 +403,13 @@
 		}));
 	};
 
-	const load = async (input: string) => {
-		const data = [
-			{ Text: 'a', Value: 'a' },
-			{ Text: 'b', Value: 'b' },
-			{ Text: 'c', Value: 'c' },
-			{ Text: 'd', Value: 'd' },
-			{ Text: 'e', Value: 'e' },
-			{ Text: 'f', Value: 'f' },
-			{ Text: 'g', Value: 'g' }
-		];
-
-		return data.map((item: any) => ({
-			label: item.Text,
-			value: item.Value
-		}));
-	};
-
 	const handleAutoCompleteSelect = async (e: { detail: { value: string; label: string } }) => {
 		q = e.detail.value;
 
 		return null;
 	};
 
+	
 	onMount(async () => {
 		await handleSearch(true);
 	});
@@ -450,6 +438,8 @@
 							on:showMoreSelect={handleShowMoreSelect}
 							on:showMoreOpenChange={handleShowMoreOpenChange}
 						/>
+						{:else}
+						<TablePlaceholder cols={1} rows={12}/>
 					{/if}
 				</div>
 			</div>
@@ -586,14 +576,25 @@
 				</div>
 			</div>
 			<div class="pt-8">
+
 				{#if config}
 					<div class:hidden={currentView === 'cards'} class="">
 						<Table {config} />
 					</div>
+					<div class:hidden={currentView === 'table'}>
+						<Cards store={placeholderStore} {authorLabel} />
+					</div>
+				{:else}
+
+				{#if currentView === 'table'}
+					<TablePlaceholder cols={6} rows={10}/>
 				{/if}
-				<div class:hidden={currentView === 'table'}>
-					<Cards store={placeholderStore} {authorLabel} />
-				</div>
+				{#if currentView === 'cards'}
+    		<CardsPlaceHolder />
+				{/if}
+
+				{/if}
+
 			</div>
 		</div>
 	</Pane>
diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/search/+page.svelte b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI.Svelte/src/routes/search/+page.svelte
@@ -4,6 +4,7 @@
 
 	const controller = 'search';
 
+
 	const links: linkType[] = [
 		{ label: 'Public Search', url: '/ddm/publicsearch' },
 		{ label: 'Manual', url: '/home/docs/Search%20and%20Download%20Data/' }
diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI/Controllers/SearchController.cs b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI/Controllers/SearchController.cs
@@ -15,6 +15,7 @@
 using Vaiona.IoC;
 using Vaiona.Web.Extensions;
 using Vaiona.Web.Mvc.Models;
+using Vaiona.Web.Mvc.Modularity;
 using SearchCriteria = BExIS.Utils.Models.SearchCriteria;
 
 namespace BExIS.Modules.Ddm.UI.Controllers
@@ -32,6 +33,9 @@ public ActionResult Index()
             ViewData["app"] = SvelteHelper.GetApp(module);
             ViewData["start"] = SvelteHelper.GetStart(module);
 
+            var settings = ModuleManager.GetModuleSettings("DDM");
+            ViewData["search_result_presentation"] = settings.GetValueByKey("search_result_presentation").ToString();
+
             return View();
         }
 
diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI/Ddm.Settings.json b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI/Ddm.Settings.json
@@ -45,6 +45,17 @@
       "type": "Boolean",
       "description": "If set to true, the minor version tag can be assigned to dataset versions to display changes in more detail."
     },
+    {
+      "key": "search_result_presentation",
+      "title": "Search Result Presentation",
+      "value": "table",
+      "description": "Select the initial display format for all user search results across the system. This setting establishes the global baseline for result presentation.",
+      "type": "String",
+      "options": [
+        "table",
+        "cards"
+      ]
+    },
     {
       "key": "data_aggreement",
       "title": "Data Aggreement by download",
diff --git a/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI/Views/Search/Index.cshtml b/Console/BExIS.Web.Shell/Areas/DDM/BExIS.Modules.Ddm.UI/Views/Search/Index.cshtml
@@ -2,15 +2,15 @@
     ViewBag.Title = "Search";
     Layout = "~/Themes/Default/Layouts/_svelteLayout.cshtml";
 
-    bool isTemplateRequired = false;
+    string search_result_presentation = "";
 
-    if (ViewData["isTemplateRequired"] != null)
+    if (ViewData["search_result_presentation"] != null)
     {
-        isTemplateRequired = (bool)ViewData["isTemplateRequired"];
+        search_result_presentation = ViewData["search_result_presentation"].ToString();
     }
 
 }
 
-<div id="search">
+<div id="search" search_result_presentation="@search_result_presentation" >
     @Html.Partial("_sveltePage")
 </div>

Original file line number	Diff line number	Diff line change
`@@ -2,15 +2,15 @@`
`2`	`2`	`ViewBag.Title = "Search";`
`3`	`3`	`Layout = "~/Themes/Default/Layouts/_svelteLayout.cshtml";`
`4`	`4`
`5`		`- bool isTemplateRequired = false;`
	`5`	`+ string search_result_presentation = "";`
`6`	`6`
`7`		`- if (ViewData["isTemplateRequired"] != null)`
	`7`	`+ if (ViewData["search_result_presentation"] != null)`
`8`	`8`	`{`
`9`		`- isTemplateRequired = (bool)ViewData["isTemplateRequired"];`
	`9`	`+ search_result_presentation = ViewData["search_result_presentation"].ToString();`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`}`
`13`	`13`
`14`		`-<div id="search">`
	`14`	`+<div id="search" search_result_presentation="@search_result_presentation" >`
`15`	`15`	`@Html.Partial("_sveltePage")`
`16`	`16`	`</div>`