bugfix-> spinner align to center

[Yagnik56]

This PR align feature flags the root page spinner in the center.
Also changed Search placeholder string as per Figma.

[zackcl]

@Yagnik56 @danoswaltCL I'm wondering when we display the loading progress bar above the table and when we display the spinner. It seems like the spinner is visible only the first time the page is refreshed. Could we make it consistently display the loading progress bar for loading the table content instead of using the spinner unless it's really necessary? If you update this.featureFlagService.fetchFeatureFlags(); to this.featureFlagService.fetchFeatureFlags(true); and click on "Feature Flags" from the sidenav, you will always see the loading progress bar whenever the feature flags data is refetched. I wonder if it's possible to make it always work like this, even after the page is refreshed.

[zackcl]

If that's not possible, I think it might be better to show the spinner at the center of the page without displaying the empty section card, similar to how the Experiments page works. I believe this approach is better and safer unless we want to allow users to interact with the page before loading is complete.

[zackcl]

The PR is fine, but I'm just throwing out some questions and ideas. We might discuss this in the meeting.

[zackcl]

While we decided to keep the spinner as it is for now, I would like to suggest reducing the size of the spinner and adding padding to the spinner container for consistency and a more natural look.

@Yagnik56 Could you apply these two changes?

• Update the mat-spinner tag from <mat-spinner></mat-spinner> to <mat-spinner diameter="60"></mat-spinner> in feature-flag-root-section-card.component.html
• Add padding: 64px; inside the .mat-spinner-container {} in feature-flag-root-section-card.component.scss

This will make the spinner to be shown like this while loading:

[zackcl]

@Yagnik56 I just made a commit to update the style since it's a minor change.