const renderRulesOrGroups = () => {
    if (loading || isrunning) {
      return (
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "200px" }}>
          <FwSpinner size="medium" color="green" />
        </div>
      );
    }
  
    // Determine current groups and flatRules based on active tab
    let groups = [];
    let flatRules = [];
    switch (activeTab) {
      case "ticketcreate":
        groups = ticketCreationRuleGroups;
        flatRules = ticketCreationRules;
        break;
      case "ticketupdate":
        groups = ticketUpdateRuleGroups;
        flatRules = ticketUpdateRules;
        break;
      case "hourly":
        groups = hourlyRuleGroups;
        flatRules = hourlyTriggerRules;
        break;
      default:
        break;
    }
  
    // Helper: render AutomationCard wrapped in container div with consistent styling
    const renderRuleCard = (rule, index, isFirstInGroup = true) => (
      <div
        key={rule.id || index}
        className="fw-card-1"
        style={{
          marginBottom: "5px",
          marginTop: "10px",
          padding: "5px 8px",
          marginLeft: 10,
          marginRight: "auto",
        }}
      >
        <AutomationCard
          rule={rule}
          index={index}
          isFirstInGroup={isFirstInGroup}
          onDelete={() => deleteRule(rule, filteredFlatRules, fetchFromApi, getEntityDataForCurrentTab())}
          activeTab={activeTab}
          onSelect={openRuleDetails}
          agent={agent}
        />
      </div>
    );
  
    if (ruleViewFilter.value === "duplicate_rules") { 
      const paginatedGroups = paginateDuplicateGroups(groups, rulesPerPage, searchQuery);
      const pageIndex = currentPage[activeTab] - 1;
      const groupsToShow = paginatedGroups[pageIndex] || [];
  
      // Flatten & filter rules on this page
      const flattenedRulesOnPage = flattenGroups(groupsToShow);
      const filteredRulesOnPage = getFilteredRules(flattenedRulesOnPage);
  
      // Filter groups to only include rules present in filteredRulesOnPage
      const filteredGroupsToShow = groupsToShow
        .map((group) => group.filter((rule) => filteredRulesOnPage.some((f) => f.id === rule.id)))
        .filter((group) => group.length > 0);
  
      if (filteredGroupsToShow.length === 0) {
        return <p style={{ textAlign: "center", marginTop: "20px" }}>2 No Rules Found.</p>;
      }


      if (groups.length === 0) {
        return <p style={{ textAlign: "center", marginTop: "20px" }}>1 No Rules Found.</p>;
      }
  
      return (
        <div style={{ marginLeft: 10, marginRight: "auto" }}>
          {filteredGroupsToShow.map((group, groupIdx) => (
            <div
              key={`group-${pageIndex}-${groupIdx}`}
              style={{ marginBottom: "12px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }}
            >
              {group.map((rule, i) => {
                // Use index + 1 for 1-based indexing as before
                return (
                  <div
                    key={rule.id}
                    className="fw-card-1"
                    style={{
                      marginTop: i === 0 ? "10px" : "2px",
                      padding: "5px 8px",
                      borderRadius: "4px",
                    }}
                  >
                    <AutomationCard
                      rule={rule}
                      index={i + 1}
                      isFirstInGroup={i === 0}
                      onDelete={() => {
                        const entityData = getEntityDataForCurrentTab();
                        deleteRule(rule, filteredFlatRules, fetchFromApi, entityData);
                      }}
                      activeTab={activeTab}
                      onSelect={openRuleDetails}
                      agent={agent}
                    />
                  </div>
                );
              })}
            </div>
          ))}
        </div>
      );
    } else {
      // Normal / All Rules View
      const filteredFlatRules = getFilteredRules(flatRules);
  
      if (filteredFlatRules.length === 0) {
        return <p style={{ textAlign: "center", marginTop: "20px" }}>3 No Rules Found.</p>;
      }
  
      const paginatedFlatRules = pagination(filteredFlatRules, currentPage[activeTab]);
  
      if (paginatedFlatRules.length === 0) {
        return <p style={{ textAlign: "center", marginTop: "20px" }}>4 No Rules Found.</p>;
      }
  
      const highlightAllDuplicates = highlightDuplicates;
  
      return paginatedFlatRules.map((rule, idx) => {
        const isDuplicate = duplicateGroupsMap.duplicateRuleIds.has(rule.id);
        const isFirstInGroup = duplicateGroupsMap.firstRuleIds.has(rule.id);
  
        if (highlightAllDuplicates && isDuplicate) {
          return renderRuleCard(rule, idx + 1, isFirstInGroup);
        } else {
          return renderRuleCard(rule, idx + 1, true);
        }
      });
    }
  };

in this, on showing no rules found, add a 3 sec delay using css give me fixed in this code