#25878 updated css classes names, added isLoading

Author: KrzysztofBrylski

plugins/navigate/index.js

@@ -4,29 +4,30 @@ import {
 } from '../../common/plugin-element-cache.js';
 
 const generateLoader = (pluginId) => {
-  let loader = getCachedElement(`${pluginId}-loader`)?.element;
+  let loader = getCachedElement(
+    `${pluginId}-flotiq-singleton-plugin-loader`,
+  )?.element;
 
   if (!loader) {
     loader = document.createElement('div');
-    loader.classList.add('loader-container');
-    loader.innerHTML = '<div class="loader"></div>';
+    loader.classList.add('flotiq-singleton-plugin-loader-container');
+    loader.innerHTML = '<div class="flotiq-singleton-plugin-loader"></div>';
 
-    addElementToCache(loader, `${pluginId}-loader`);
+    addElementToCache(loader, `${pluginId}-flotiq-singleton-plugin-loader`);
   }
 
   return loader;
 };
 
 export default function gridRenderHandler(
-  { contentType, contentObjects, isFetching },
+  { contentType, contentObjects, isFetching, isLoading },
   getPluginSettings,
   navigate,
 ) {
-  if (!getPluginSettings()) return;
+  if (isLoading || isFetching) return generateLoader();
   const settings = JSON.parse(getPluginSettings());
 
   if (!settings.singleton_types.includes(contentType?.name)) return;
-  if (isFetching) return generateLoader();
 
   const url = new URL(window.location.href);
 

plugins/styles/style.css

@@ -1,16 +1,16 @@
-.loader-container{
+.flotiq-singleton-plugin-loader-container{
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.loader{
-  width: 35px;
-  height: 35px;
-  border: 3px solid #ccc;
-  border-top: 3px solid #0083FC;
+.flotiq-singleton-plugin-loader{
+  width: 50px;
+  height: 50px;
+  border: 5px solid #ccc;
+  border-top: 5px solid #0083FC;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }