Fixed still loading of the Saving bar for the CC licenses

Author: milanmajchrak

CC_LICENSE_TESTING_GUIDE.md

@@ -0,0 +1,91 @@
+# Creative Commons License Performance Issue - Testing Guide
+
+## Issue Summary
+During submission creation, when selecting Creative Commons license and clicking through its options, the "Saving..." indicator would appear infinitely. After reloading the page, the Creative Commons checkbox would be checked but the license value was not stored in metadata.
+
+## Fix Applied
+The issue was resolved by implementing:
+1. **Debounced API calls** (300ms delay) to prevent excessive license link requests
+2. **Observable caching** using `shareReplay(1)` to avoid redundant HTTP calls  
+3. **Improved state change detection** to prevent unnecessary JSON patch operations
+4. **Proper subscription management** to prevent memory leaks
+
+## Testing Steps
+
+### Before Testing
+1. Build and start the DSpace Angular application:
+   ```bash
+   cd c:\dspace-angular-clarin
+   npm start
+   ```
+
+### Test Scenario 1: Rapid Option Selection
+1. Navigate to submission creation page
+2. Choose Creative Commons from the license dropdown
+3. **Rapidly click** through different license options (e.g., BY, BY-SA, BY-NC, etc.)
+4. **Expected Result**: 
+   - No infinite "Saving..." indicator
+   - Options respond immediately to clicks
+   - License link appears/updates smoothly
+
+### Test Scenario 2: License Acceptance and Persistence
+1. Select a Creative Commons license type
+2. Choose your preferred options (commercial use, derivatives, etc.)
+3. **Check the acceptance checkbox** for the generated license link
+4. Save the submission (Save for Later)
+5. **Reload the page**
+6. **Expected Result**:
+   - Creative Commons section shows as selected
+   - License URI is properly stored in metadata
+   - Previous options are preserved
+
+### Test Scenario 3: Performance Verification
+1. Open browser developer tools (F12)
+2. Go to Network tab
+3. Navigate to Creative Commons section
+4. Rapidly change license options
+5. **Expected Result**:
+   - Fewer HTTP requests to license URL endpoints
+   - No duplicate or overlapping requests
+   - Requests are debounced (not immediate)
+
+### Test Scenario 4: Submission Completion
+1. Complete the Creative Commons license selection
+2. Fill out other required submission sections
+3. Submit/deposit the item
+4. **Expected Result**:
+   - Submission completes successfully
+   - Creative Commons license metadata is included in final item
+
+## Expected Behavior Changes
+
+### Before Fix
+- ❌ Infinite "Saving..." indicator
+- ❌ Multiple simultaneous API calls
+- ❌ License URI not stored in metadata
+- ❌ Poor performance with rapid clicks
+
+### After Fix  
+- ✅ Smooth interaction with no infinite saving
+- ✅ Debounced API calls (max 1 per 300ms)
+- ✅ License URI properly persisted
+- ✅ Responsive performance even with rapid clicks
+
+## Verification Points
+
+1. **No Console Errors**: Check browser console for any JavaScript errors
+2. **Network Efficiency**: Reduced number of HTTP requests in Network tab
+3. **Data Persistence**: License data survives page reloads
+4. **User Experience**: Smooth, responsive interface interactions
+
+## Rollback Plan
+If any issues are discovered, the changes can be easily reverted by restoring the original `submission-section-cc-licenses.component.ts` file from git history.
+
+## Technical Details
+The fix is implemented entirely within the Angular component layer and does not affect:
+- Backend APIs
+- Database schemas  
+- Other submission sections
+- Existing license data
+
+This ensures minimal risk and easy maintenance.

CREATIVE_COMMONS_FIX_CHANGES.md

@@ -0,0 +1,96 @@
+# Creative Commons License Performance Fix
+
+## Problem Description
+The Creative Commons license section in the submission form was experiencing infinite saving loops when users clicked on license options. The "Saving..." indicator would appear indefinitely, preventing users from continuing with their submission.
+
+## Root Cause Analysis
+The issue was caused by:
+
+1. **Lack of debouncing**: Rapid clicks on CC license options triggered multiple immediate HTTP requests to fetch license links
+2. **Inefficient observable handling**: The `ccLicenseLink$` observable was being recreated on every change without proper caching
+3. **Overly sensitive state subscriptions**: The section state subscription was triggering unnecessary JSON patch operations on every minor change
+
+## Solution Implemented
+
+### 1. Added Debouncing Mechanism
+- Introduced `ccLicenseLinkTrigger$` Subject to control when license link updates are triggered
+- Added 300ms debouncing to prevent rapid successive API calls
+- Used `switchMap` to cancel previous requests when new ones are triggered
+
+### 2. Improved Observable Caching
+- Used `shareReplay(1)` to cache the latest license link result
+- Added `distinctUntilChanged` to prevent duplicate emissions
+- Proper initialization with `startWith(undefined)`
+
+### 3. Enhanced State Change Detection
+- Improved the `distinctUntilChanged` operator to properly compare Creative Commons license data
+- Added more precise filtering to prevent unnecessary patch operations
+- Only trigger URI operations when acceptance state actually changes
+
+## Code Changes
+
+### Modified Files
+- `src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts`
+
+### Key Changes Made
+
+1. **Added new imports**:
+   ```typescript
+   import { Subject } from 'rxjs';
+   import { debounceTime, switchMap, startWith, shareReplay } from 'rxjs/operators';
+   ```
+
+2. **Added debouncing subject**:
+   ```typescript
+   private ccLicenseLinkTrigger$ = new Subject<void>();
+   ```
+
+3. **Restructured ngOnInit**:
+   ```typescript
+   this.ccLicenseLink$ = this.ccLicenseLinkTrigger$.pipe(
+     startWith(undefined),
+     debounceTime(300),
+     switchMap(() => this.getCcLicenseLink$() || observableOf(null)),
+     shareReplay(1),
+     distinctUntilChanged()
+   );
+   ```
+
+4. **Updated selection methods**:
+   - `selectCcLicense()` now triggers `this.ccLicenseLinkTrigger$.next()`
+   - `selectOption()` now triggers `this.ccLicenseLinkTrigger$.next()`
+   - `ngOnChanges()` now triggers `this.ccLicenseLinkTrigger$.next()`
+
+5. **Enhanced state subscription**:
+   - More precise comparison in `distinctUntilChanged`
+   - Better filtering to prevent unnecessary operations
+   - Only process URI changes when acceptance state actually changes
+
+6. **Proper cleanup**:
+   ```typescript
+   onSectionDestroy(): void {
+     this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+     this.ccLicenseLinkTrigger$.complete();
+   }
+   ```
+
+## Expected Results
+
+1. **Performance Improvement**: No more infinite saving loops when clicking CC license options
+2. **Better User Experience**: Faster response times due to reduced API calls
+3. **Resource Efficiency**: Debounced requests reduce server load
+4. **Data Integrity**: License selections are properly saved to metadata after accepting
+
+## Testing Instructions
+
+1. Navigate to submission creation page
+2. Select Creative Commons in the license dropdown
+3. Rapidly click through different license options
+4. Verify that:
+   - No infinite "Saving..." indicator appears
+   - License options are properly selected
+   - After accepting, the license URI is saved to metadata
+   - Page reload preserves the Creative Commons checkbox state
+
+## Backward Compatibility
+This fix maintains complete backward compatibility. No API changes were made, only internal observable handling improvements.

src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts

@@ -1,11 +1,11 @@
 import { ChangeDetectorRef, Component, Inject, OnChanges, SimpleChanges, OnInit } from '@angular/core';
-import { Observable, of as observableOf, Subscription, tap } from 'rxjs';
+import { Observable, of as observableOf, Subscription, tap, Subject } from 'rxjs';
 import { Field, Option, SubmissionCcLicence } from '../../../core/submission/models/submission-cc-license.model';
 import {
   getFirstCompletedRemoteData, getFirstSucceededRemoteDataPayload,
   getRemoteDataPayload
 } from '../../../core/shared/operators';
-import { distinctUntilChanged, filter, map, take } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map, take, debounceTime, switchMap, startWith, shareReplay } from 'rxjs/operators';
 import { SubmissionCcLicenseDataService } from '../../../core/submission/submission-cc-license-data.service';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { renderSectionFor } from '../sections-decorator';
@@ -89,6 +89,11 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    */
   private _isLastPage: boolean;
 
+  /**
+   * Subject to trigger CC license link updates with debouncing
+   */
+  private ccLicenseLinkTrigger$ = new Subject<void>();
+
   /**
    * The Creative Commons link saved in the workspace item.
    */
@@ -129,14 +134,20 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
 
   ngOnInit(): void {
     super.ngOnInit();
-    if (hasNoValue(this.ccLicenseLink$)) {
-      this.ccLicenseLink$ = this.getCcLicenseLink$();
-    }
+    // Initialize the debounced license link observable
+    this.ccLicenseLink$ = this.ccLicenseLinkTrigger$.pipe(
+      startWith(undefined), // Start with initial trigger
+      debounceTime(300), // Debounce rapid clicks
+      switchMap(() => this.getCcLicenseLink$() || observableOf(null)),
+      shareReplay(1), // Cache the latest result
+      distinctUntilChanged()
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (hasValue(changes.sectionData) || hasValue(changes.submissionCcLicenses)) {
-      this.ccLicenseLink$ = this.getCcLicenseLink$();
+      // Trigger the debounced license link update
+      this.ccLicenseLinkTrigger$.next();
     }
   }
 
@@ -164,7 +175,8 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
       },
       uri: undefined,
     });
-    this.ccLicenseLink$ = this.getCcLicenseLink$();
+    // Trigger the debounced license link update
+    this.ccLicenseLinkTrigger$.next();
   }
 
   /**
@@ -196,7 +208,8 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
       },
       accepted: false,
     });
-    this.ccLicenseLink$ = this.getCcLicenseLink$();
+    // Trigger the debounced license link update
+    this.ccLicenseLinkTrigger$.next();
   }
 
   /**
@@ -272,6 +285,8 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
    */
   onSectionDestroy(): void {
     this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+    // Complete the subject to prevent memory leaks
+    this.ccLicenseLinkTrigger$.complete();
   }
 
   /**
@@ -284,18 +299,35 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         filter((sectionState) => {
           return isNotEmpty(sectionState) && (isNotEmpty(sectionState.data) || isNotEmpty(sectionState.errorsToShow));
         }),
-        distinctUntilChanged(),
+        distinctUntilChanged((prev, curr) => {
+          // More precise comparison to prevent unnecessary updates
+          const prevData = prev?.data as WorkspaceitemSectionCcLicenseObject;
+          const currData = curr?.data as WorkspaceitemSectionCcLicenseObject;
+          return prevData?.accepted === currData?.accepted &&
+            prevData?.uri === currData?.uri &&
+            JSON.stringify(prevData?.ccLicense) === JSON.stringify(currData?.ccLicense);
+        }),
         map((sectionState) => sectionState.data as WorkspaceitemSectionCcLicenseObject),
       ).subscribe((data) => {
-        if (this.data.accepted !== data.accepted) {
+        const wasAccepted = this.data.accepted;
+        const wasUri = this.data.uri;
+
+        // Only process if acceptance state actually changed
+        if (wasAccepted !== data.accepted && data.accepted !== undefined) {
           const path = this.pathCombiner.getPath('uri');
-          if (data.accepted) {
-            this.getCcLicenseLink$().pipe(
-              take(1),
-            ).subscribe((link) => {
-              this.operationsBuilder.add(path, link.toString(), false, true);
-            });
-          } else if (!!this.data.uri) {
+          if (data.accepted && !wasAccepted) {
+            // Only add URI if we're switching from not accepted to accepted
+            const licenseLink$ = this.getCcLicenseLink$();
+            if (licenseLink$) {
+              licenseLink$.pipe(
+                take(1),
+                filter(link => !!link && link !== wasUri) // Only proceed if link exists and is different
+              ).subscribe((link) => {
+                this.operationsBuilder.add(path, link.toString(), false, true);
+              });
+            }
+          } else if (!data.accepted && wasAccepted && !!this.data.uri) {
+            // Only remove URI if we're switching from accepted to not accepted
             this.operationsBuilder.remove(path);
           }
         }
@@ -305,12 +337,12 @@ export class SubmissionSectionCcLicensesComponent extends SectionModelComponent
         getFirstCompletedRemoteData(),
         getRemoteDataPayload()
       ).subscribe((remoteData) => {
-          if (remoteData === undefined || remoteData.values.length === 0) {
-            // No value configured, use blank value (International jurisdiction)
-            this.defaultJurisdiction = '';
-          } else {
-            this.defaultJurisdiction = remoteData.values[0];
-          }
+        if (remoteData === undefined || remoteData.values.length === 0) {
+          // No value configured, use blank value (International jurisdiction)
+          this.defaultJurisdiction = '';
+        } else {
+          this.defaultJurisdiction = remoteData.values[0];
+        }
       })
     );
     this.loadCcLicences();